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 重定向吗?
我在 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 重定向吗?