Angular项目页面重载后发起HTTP调用出现CORS错误如何排查

问题定位 #

该报错属于混合内容拦截：页面运行在HTTPS环境下，浏览器禁止主动发起HTTP明文请求，即使代码内配置的API地址为HTTPS，运行时实际请求被跳转到HTTP地址就会触发该错误。

可能的具体诱因如下：

• 服务端重定向配置错误：Django服务端或上层反向代理（Nginx/Apache等）配置了错误的重定向规则，收到HTTPS请求后返回301/302永久重定向到HTTP地址。浏览器会缓存永久重定向规则，所以前几次请求正常，缓存生效后再请求就会直接访问HTTP地址，触发拦截。
  Django侧常见配置错误点：开启SECURE_SSL_REDIRECT后没有配置SECURE_PROXY_SSL_HEADER，导致Django识别不到请求是HTTPS协议，错误跳转HTTP。
• Angular环境变量加载异常：页面重载后环境变量未正确加载，误读取了开发环境配置的HTTP协议API地址，导致实际请求地址和写死的常量不一致。
• Django CORS配置不完整：使用django-cors-headers库时，CORS_ALLOWED_ORIGINS未正确添加https://staging.example.com，或者Django识别不到HTTPS协议，返回的跨域头不符合要求，也可能触发跨域拦截。

修复方案 #

1. 打开浏览器开发者工具的「网络」面板，复现问题查看API请求的跳转链路：如果存在301/302重定向到HTTP地址的情况，先清除浏览器重定向缓存，再调整服务端配置：
   • 反向代理侧配置强制所有HTTP请求跳转到HTTPS，不要配置反向的HTTPS跳HTTP规则
   • Django配置文件添加对应参数：

   SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
   SECURE_SSL_REDIRECT = True
   

   确保反向代理请求Django时携带X-Forwarded-Proto头。
2. 在Angular的API请求逻辑中打印SERVER_URL变量，确认重载页面后变量值始终为https://api.example.com，排查环境变量的加载逻辑是否存在异常分支。
3. 检查django-cors-headers配置：确保CORS_ALLOWED_ORIGINS包含测试站地址https://staging.example.com，临时开启CORS_ALLOW_ALL_ORIGINS = True可快速验证是否为CORS配置导致的问题，生产环境需关闭该配置避免安全风险。

内容的提问来源于stack exchange，提问作者Nitin Bhardwaj