从CloudFront访问Beanstalk API遇HTTPS拦截错误求助

核心错误根源 #

这个错误是浏览器混合内容拦截机制触发的：你的Angular应用通过CloudFront以HTTPS协议加载，但API请求走了HTTP协议，浏览器会默认阻止这种不安全的跨协议请求。

逐一排查配置要点 #

1. Elastic Beanstalk 端HTTPS配置有效性验证 #

• 负载均衡器监听器：必须配置HTTPS（443端口）监听器，绑定AWS证书管理器（ACM）中覆盖API域名的有效SSL证书，转发规则指向EC2实例的对应端口（通常是80或8080，根据Spring Boot配置而定）。
• 安全组规则：负载均衡器安全组需开放443端口的入站流量；EC2实例安全组仅允许负载均衡器安全组的80/443端口入站（避免直接开放0.0.0.0/0）。
• 直接验证API：用浏览器或curl访问负载均衡器的HTTPS域名，确认能正常返回API响应，排除后端服务本身的问题。

2. Angular应用API请求地址修正 #

• 确保代码中API的基础URL为HTTPS协议（例如https://api.yourdomain.com），而非HTTP或负载均衡器内部IP/HTTP域名。
• 检查环境变量：生产环境的API地址变量必须配置为HTTPS地址，避免硬编码错误。

3. CloudFront代理API的配置修复（若使用此方案） #

目标组状态异常的常见原因：

• 健康检查配置错误：Spring Boot应用的健康检查路径需正确（如启用Actuator则用/actuator/health），端口要与实例上的服务端口一致（默认8080需确认）。
• 源配置错误：CloudFront源需选择自定义源，输入负载均衡器的HTTPS域名，端口选443，协议指定HTTPS。
• 缓存行为配置：API路径（如/api/*）需设置为不缓存，同时允许OPTIONS请求（解决CORS预校验问题）。

4. Spring Boot后端CORS配置检查 #

• 后端需配置CORS规则，允许来自Angular应用域名（CloudFront域名）的跨域请求，明确指定Access-Control-Allow-Origin为你的CloudFront域名（生产环境禁用*），并开放必要的HTTP方法与请求头。

5. Elastic Beanstalk强制HTTPS重定向 #

通过.ebextensions配置文件添加HTTP转HTTPS规则，避免后端返回HTTP响应：
创建.ebextensions/https-redirect.config文件，内容如下：

files:
  "/etc/httpd/conf.d/ssl-redirect.conf":
    mode: "000644"
    owner: root
    group: root
    content: |
      RewriteEngine On
      <If "-n '%{HTTP:X-Forwarded-Proto}' && %{HTTP:X-Forwarded-Proto} != 'https'">
      RewriteRule ^/(.*)$ https://%{HTTP_HOST}/$1 [R,L]
      </If>

部署此配置后，负载均衡器转发的HTTP请求会自动重定向到HTTPS。

验证步骤 #

1. 直接访问API的HTTPS地址，确认响应正常。
2. 在浏览器开发者工具的Network标签中，检查API请求的协议是否为HTTPS，无HTTP跳转。
3. 查看控制台错误信息，确认是否存在CORS或其他关联错误。

内容的提问来源于stack exchange，提问作者Mr. Disability