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

Question

我有一个在 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 }
});

我也尝试提供包括协议(protocol)在内的完整 URL，但这并没有什么不同。

Answer 1

更新 .htaccess 配置

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

将 .htaccess 文件配置更新为

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

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