在HTTPS页面中运行HTTP AJAX操作时“混合内容被阻止”

Question

我有一个表格，我正在提交（通过GET，因为这是必需的）到crm（ViciDial）。我可以成功提交表单，但如果我这样做，crm的处理文件只会回显成功文本，就是这样。

我想在我的网站上显示感谢页面，而不是那个文本，所以我决定使用AJAX提交表单并将其重定向到我需要的页面，但是我在浏览器上收到此错误：

  

混合内容：“https://page.com”页面是通过HTTPS加载的，   但是请求了一个不安全的XMLHttpRequest端点   'http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data'。   此请求已被阻止;内容必须通过HTTPS提供。

这是我的AJAX脚本：

    <script>
    SubmitFormClickToCall = function(){

        jQuery.ajax({
            url: "http://XX.XXX.XX.XX/vicidial/non_agent_api.php",
            data : jQuery("#form-click-to-call").serialize(),
            type : "GET",
            processData: false,
            contentType: false,
            success: function(data){
                window.location.href = "https://www.example.com/thank-you";
            }
        });
    }
    </script>

只是在URL中设置https不起作用，有什么方法可以通过GET提交数据并将用户重定向到我的谢谢页面？

============================

这里的问题是混合内容，这意味着我通过HTTPS加载了一个页面，并试图通过AJAX点击HTTP中的API。但浏览器不允许我们这样做。

因此，如果您无法将API设置为HTTPS（这是我的情况），我们仍然可以采用不同的方式处理此问题。

主要问题不是混合内容问题，我想将数据提交给API并将用户重定向到花哨的感谢页面。而不是使用AJAX，我创建了一个php文件，接收数据使用curl将其发送到API（因为这是在服务器端完成没有混合内容问题）并将我的快乐用户重定向到一个花哨的感谢页面。

Answer 1

我通过在HTML页面中添加以下代码解决了这个问题，因为我们使用的是不受我们控制的第三方API。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

希望这会有所帮助，也可以提供记录。

Answer 2

如果您使用HTTPS在浏览器中加载页面，浏览器将拒绝通过HTTP加载任何资源。正如您所尝试的那样，更改API网址以使用HTTPS代替HTTP通常可以解决此问题。但是，您的API不得允许HTTPS连接。因此，您必须在主页上强制HTTP或请求它们允许HTTPS连接。

请注意：如果您转到API URL而不是尝试使用AJAX加载它，请求仍然有效。这是因为浏览器没有从安全页面中加载资源，而是加载了一个不安全的页面并且它正在接受它。但是为了通过AJAX提供它，协议应该匹配。

Answer 3

如果您只是访问您信任的网页并且想要快速前进，请：

1-单击地址栏最右侧的屏蔽图标。

2-在弹出窗口中，单击“仍然加载”或“加载不安全脚本”（取决于您的Chrome版本）。

---

如果要将Chrome浏览器设置为始终（在所有网页中），则允许混合内容：

1-在打开的Chrome浏览器中，按键盘上的Ctrl + Shift + Q强制关闭Chrome。下一步，Chrome必须完全关闭。

2-右键单击Google Chrome桌面图标（或“开始菜单”链接）。 选择属性。

3-在“目标”字段中现有信息的末尾添加：“ --allow-running-insecure-content”（第一个破折号前有一个空格。）

4-单击“确定”。

5-打开Chrome，然后尝试启动之前被阻止的内容。现在应该可以使用了。

Answer 4

我在Vue-CLI应用程序中遇到有关Axios请求的相同问题。进一步检查Chrome的“网络”标签后，我发现axios的请求URL正确为https，但响应“位置”标头为http。

这是由nginx引起的，我通过将这两行添加到nginx的服务器配置中来解决它：

server {
    ...
    add_header Strict-Transport-Security "max-age=31536000" always;
    add_header Content-Security-Policy upgrade-insecure-requests;
    ...
}

可能无关紧要，但是我的Vue-CLI应用程序在nginx中的子路径下使用，配置为：

location ^~ /admin {
        alias   /home/user/apps/app_admin/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Host $host;
}

Answer 5

此错误的原因非常简单。您的AJAX尝试通过HTTP进行调用，而服务器通过HTTPS运行，因此您的服务器拒绝调用AJAX。 可以通过在主HTML文件的head标签内添加以下行来解决此问题：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

Answer 6

如果您的API代码在 node.js 服务器上运行，那么您需要将注意力集中在那里，而不是Apache或NGINX。 Mikel是对的，将API URL更改为HTTPS就是答案，但如果您的API调用了node.js服务器，最好设置为HTTPS！当然，node.js服务器可以在任何未使用的端口上，它不必是端口443。

Answer 7

您可以将动态表单与元素一起使用，而不是使用Ajax Post方法。 它甚至可以在SSL中加载页面，并且提交的源代码是非SSL。

您需要设置表单元素的值值。

实际上，当目标属性设置为＆＃39; _blank＆＃39;

时，新的动态表单将在浏览器的单独标签中以非SSL模式打开

var f = document.createElement('form');
f.action='http://XX.XXX.XX.XX/vicidial/non_agent_api.php';
f.method='POST';
//f.target='_blank';
//f.enctype="multipart/form-data"

var k=document.createElement('input');
k.type='hidden';k.name='CustomerID';
k.value='7299';
f.appendChild(k);



//var z=document.getElementById("FileNameId")
//z.setAttribute("name", "IDProof");
//z.setAttribute("id", "IDProof");
//f.appendChild(z);

document.body.appendChild(f);
f.submit()

Answer 8

我是同样的问题，但对我来说，问题是ng build命令。 我正在执行“ ng build --prod”，我已将其更正为“ ng build --prod --base-href / applicationname /”。这解决了我的问题。

Answer 9

在我的情况下，我的本地主机是http，部署的版本是https，所以我使用此脚本仅为https：添加了HTTP-equiv元标记：

if (window.location.protocol.indexOf('https') == 0){
  var el = document.createElement('meta')
  el.setAttribute('http-equiv', 'Content-Security-Policy')
  el.setAttribute('content', 'upgrade-insecure-requests')
  document.head.append(el)
}

Answer 10

我使用了POST方法，并在url的末尾删除了一个简单的斜杠。我将其更改为：

/我的/网址/

收件人：

/ my / url

它有效。

我不知道原因。也许有人可以解释它。