在 HTTPS 页面中运行 HTTPAJAX 操作时“混合内容阻塞”

小开

最佳答案

如果您使用 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。

小开

可以不使用 AjaxPost 方法，而是使用动态表单和元素。即使页面是用 SSL 加载的，并且提交的源代码是非 SSL 的，它也能正常工作。

需要设置表单元素的值。

实际上，当目标属性设置为“ _ space”时，新的动态表单将在 Browser 的单独选项卡中以非 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">

希望这能有所帮助，也希望能留下记录。

小开

如果你只是访问一个你信任的网页，并且想要快速前进，只需要:

点击地址栏最右边的盾牌图标。

2-在弹出窗口中，点击“加载无论如何”或“加载不安全的脚本”(取决于你的 Chrome 版本)。

如果你想把你的 Chrome 浏览器设置为 ALWAYS (在所有网页中)允许混合内容:

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

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

3-在 Target 字段中现有信息的末尾添加: “—— allow-running-security-content”(在第一个破折号之前有一个空格)

4-点击确定。

5-打开 Chrome，尝试启动之前被屏蔽的内容。现在应该可以工作了。

小开

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

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

小开

我也有同样的问题，但对我来说，问题是如何构建命令。我正在做“ ng build —— prod”，我已经将它更正为“ ng build —— prod —— base-href/applicationname/”。这解决了我的问题。

小开

在我的例子中，我的 localhost 是 http，我部署的版本是 https，所以我使用这个脚本为 https 添加 http-equv meta 标记:

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 应用程序中遇到过同样的问题。在进一步检查 Chrome 的 Network 选项卡时，我发现 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 App 是在 nginx 的子路径下提供的，其 config 如下:

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 的末尾删除了一个简单的斜杠:

我的网址

致:

我的网址

而且成功了。

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

小开

Mikel 上面的答案是正确的; 它与使用 HTTPS 的前端和使用 HTTP 的后端相关; 因此在后端上安装 SSL 证书。

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

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

在不安全的内容改变它从块允许。

小开

这个方法对我很有效

只要加到头上就行了

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

在 HTTPS 页面中运行 HTTPAJAX 操作时“混合内容阻塞”

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