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

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

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

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

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

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

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

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

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

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

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

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

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

4- 单击确定。

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

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

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

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