AJAX 调用因混合内容 HTTP/HTTPS 错误而失败,无法强制使用 HTTPS

AJAX calls to fail with mixed content HTTP/HTTPS errors, can't force HTTPS

我在 ELB 后面有一个 EC2 实例 运行,为此我使用 AWS Certificate Manager (ACM) 启用 HTTPS。

正如一些地方所建议的那样,我将 HTTP(端口 80)和 HTTPS (443) 映射到我的实例的 HTTP(端口 80)。

我还通过将这些行添加到 .htaccess 文件来启用强制安全连接:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

所有这些都运行良好。所有页面都按预期显示安全内容,控制台中没有关于混合内容的警告。

仅在我进行 AJAX 调用的页面上,我收到有关混合内容的错误,并且仅在 Chrome 中出现。 FireFox 按预期工作,但控制台仍然显示错误。

错误(FireFox):

Content Security Policy: Upgrading insecure request 'http://example.com/myapi/get_company/?code=abcd&limit=8' to use 'https'

错误(Chrome):

Mixed Content: The page at 'https://example.com/mypage' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example.com/myapi/get_company/?code=abcd&limit=8'. This request has been blocked; the content must be served over HTTPS.

我打开了 chrome://net-internals/,据我所知,有两个调用,第一个收到 HTTP 301 Permanent Redirect,第二个失败,因为重定向指向 HTTP 页面,而不是 HTTPS。

AJAX 调用如下所示:

$url = "/myapi/get_company?code=" + e;
apiJson = $.ajax({
    url: $url, 
    dataType: 'json',
    data:{
        limit:8
    },
success: function(data) { //Some code here },
error: function(jqXHR, textStatus, errorThrown) { //Some code here }
});

我也尝试提供完整的 URL 包括协议,但这并没有什么不同。

更新 .htaccess 配置

RewriteCond %{HTTPS} !=on --> 不需要

将 .htaccess 文件配置更新为

RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

除了更改 .htaccess 文件外,您还需要确保,一旦使用 HTTPS 方案加载页面,从该页面发出的 ajax 调用不应在 HTTP 上。您看到的错误是浏览器错误,与您的 elb 的配置方式无关。

我找到了解决方案,现在发布我自己问题的答案。不要问我是怎么想出来的,因为我无法给你一个明确的答案,但这就是它的作用:

$url = "/myapi/get_company?code=" + e;

更改为:

$url = "/myapi/get_company/?code=" + e;

注意尾部斜线,就在参数之前。在服务器端处理 AJAX 调用的实际文件在这里:

/myapi/get_company/index.php

检查问题是否在服务器上,而不是在客户端上。您的 AJAX 调用是针对 API 端点; API 端点 return 应该 return HTTPS 重定向时是 HTTP 重定向吗?