在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 URL更改为使用HTTPS而不是HTTP通常可以解决此问题.但是,您的API不得允许HTTPS连接.因此,您必须在主页上强制HTTP或请求它们允许HTTPS连接.

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

Answer 3

如果您只是访问一个您信任且希望快速前进的网页,只需:

1-单击地址栏最右侧的盾牌图标.

2-在弹出窗口中,单击"仍然加载"或"加载不安全脚本"(取决于您的Chrome版本).

如果您要将Chrome浏览器设置为ALWAYS(在所有网页中),请允许混合内容:

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

2-右键单击Google Chrome桌面图标(或"开始"菜单链接).选择属性.

3-在Target字段中的现有信息的末尾添加:" - allow-running-insecure-content"(第一个破折号前面有一个空格.)

4-单击"确定".

5-打开Chrome并尝试启动之前阻止的内容.它现在应该工作.

Answer 4

这个错误的原因很简单。您的 AJAX 试图通过 HTTP 调用，而您的服务器通过 HTTPS 运行，因此您的服务器拒绝调用您的 AJAX。这可以通过在主 HTML 文件的 head 标记中添加以下行来解决：

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

Answer 5

米克尔上面的回答是正确的；它与前端使用 HTTPS 和后端使用 HTTP 相关；因此，请在您的后端安装 SSL 证书。

在我的 chrome 浏览器上测试期间解决这个问题；我将所需网站的 chrome 设置更改为不安全的内容，如下图所示

1-单击储物柜图标并选择站点设置

2- 对于不安全的内容，将其从阻止更改为允许。

Answer 6

我在 Vue-CLI 应用程序中遇到了与 Axios 请求相同的问题。在 Chrome 的网络选项卡中进一步检查时，我发现 axios 的请求 URL 正确，https但响应 'location' 标头为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 7

对于本地的 laravel 8 来说没问题，但在生产中我遇到了问题。为了解决这个问题，我使用了 POST 方法并删除了 url 最后的一个简单斜杠。我把它从：

/我的/网址/

到：

/我的/网址

它有效。

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