Javascript &引用；“混合内容阻止”；在HTTPS页面中运行HTTP AJAX操作时

我有一个表单，我正在向crm（ViciDial）提交（通过这种方式需要的GET）。我可以成功提交表单，但如果我这样做，crm的处理文件将只回显成功文本，仅此而已

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

混合内容：位于“”的页面是通过HTTPS加载的， 但请求了一个不安全的XMLHttpRequest端点 ''. 此请求已被阻止；内容必须通过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>

SubmitFormClickToCall=函数（）{
jQuery.ajax({
url:“http://XX.XXX.XX.XX/vicidial/non_agent_api.php",
数据：jQuery（“#表单点击调用”）.serialize（），
键入：“获取”，
processData:false，
contentType:false，
成功：功能（数据）{
window.location.href=”https://www.example.com/thank-you";
}
});
}

仅仅在URL中设置https是行不通的，有没有办法让我通过GET提交数据并将用户重定向到我的感谢页面

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

因此，如果您不能将API设置为HTTPS（这是我的情况），我们仍然可以用不同的方法来实现这一点

---

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

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

---

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

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

您可以使用动态表单和元素，而不是使用Ajax Post方法。 即使页面在SSL中加载并且提交的源是非SSL的，它也可以工作

您需要设置表单元素的值

实际上，当目标属性设置为“空白”时，新的动态表单将在浏览器的单独选项卡中以非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()

---

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

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

---

希望这会有所帮助，并记录在案。

如果您正在访问一个您信任的网页，并且希望快速前进，只需：

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

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

---

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

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

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

3-在目标字段中现有信息的末尾，添加：“--允许运行不安全的内容”（第一个破折号前有一个空格）

4-单击“确定”

---

5-打开Chrome并尝试启动先前被阻止的内容。它现在应该可以工作了。

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

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

---

我也遇到了同样的问题，但对我来说，问题是ng build命令。

---

我在做“ng build--prod”，我已将其更正为“ng build--prod--base href/applicationname/”。这就解决了我的问题。

在我的例子中，我的本地主机是

http

，部署的版本是

https

，因此我使用此脚本仅为https添加http等价元标记：

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)
}

---

我在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;
}

---

对于拉威尔8在当地它是好的，但在生产中我有问题。 为了解决这个问题，我使用了POST方法并删除了url末尾的一个简单斜杠。我把它改成：

/我的/url/

致：

/我的/url

它是有效的

我不知道原因。也许有人能解释我