引入ALB后，出现Mixed Content Error

IT技术 reactjs laravel apache amazon-web-services load-balancing
2021-05-17 20:36:13

在一个 EC2 实例前面引入 ALB（AWS 上的应用程序负载均衡器）后，Chrome 浏览器显示 Mixed Content Error。（出于安全原因，我稍微编辑了错误的内容）

Mixed Content: The page at 'https://www.sample.com/talk' was loaded 
over HTTPS, but requested an insecure EventSource endpoint 
'http://www.sample.com/api/getData?param1=123&param2=456'. This 
request has been blocked; the content must be served over HTTPS.

模式 1 没有错误。

Pattern2 显示上述错误。我不知道我的技术栈哪里出了问题。

Pattern1: ALB(443) => EC2(443)
Pattern2: ALB(443) => EC2(80)

我的技术栈：

ALB
Apache 2.4
Laravel 5.7
React 16.9

我尝试了以下解决方案，但错误仍然发生。

  1. Laravel 的信任代理。
  2. 从 React 到服务器的 HTTP 请求写成相对路径（/api/getData?param1=123¶m2=456），所以我将代码替换为指定协议和域名的绝对路径（https://www.sample.com/api~） .
  3. 在 Apache Web 服务器中，将 http 重写为 https（我认为这是个坏主意）。

这是普遍问题吗？

如果您有任何提示，请帮助我。

我很抱歉我的英语不好。

3个回答

您遇到的问题与 ALB 无关，它只是一个直通负载均衡器，在您配置时侦听一个端口并将请求转发到目标组。

由于内容混合，您的请求被浏览器阻止。如您所知，您需要使用 HTTPS 或 HTTP 相同的协议来提供内容。

我能想到的有两种可能

  1. 您的应用程序代码/配置混淆了内容
  2. 或者您的代理服务器（Apache）正在为您的端点切换协议

解决了混合内容错误。我的 Laravel 服务器前端的 http 请求代码存在问题。

我发现 URL 表示法不合适。我不知道为什么错误的 url 符号会导致混合内容错误。

示例 1. url 末尾有一个斜杠。

bad:  /api/sample/to/laravel/
good: /api/sample/to/laravel

示例 2. 查询参数的表示法不合适。

bad:  /api/sample/to/laravel/?param1=123
good: /api/sample/to/laravel?param1=123

非常感谢 mozukuzuku。您的解决方案将我引向我的解决方案。如果您正在使用 AWS ALB，并且您只是使用子目录名称 xxx.com/mmm 或 xxx.com/mmm/ 结束 IFrame SRC 的 URL，并且 URL 上没有实际文件名，则浏览器会将其视为混合内容，因为本身没有内容，因为没有文件名。如果您将 index.asp 或 default.asp 或您的文件名添加到 URL 的末尾，那么浏览器会很高兴并且混合内容消息消失（或者它会显示真正的 CSP 警告等）。没有混合内容，AWS ALB 只是在未提供文件名时返回浏览器未链接的答案。

其它你可能感兴趣的问题
上一篇font-awesome 使用 React 和 Webpack 不显示图标（仅正方形） 下一篇React 生命周期方法应该在容器组件还是展示组件中实现？