React+Express部署Azure后CORS跨域问题求助

1. 确认Express的CORS配置是否真正生效 #

• 检查中间件加载顺序：CORS中间件必须放在所有路由定义之前，比如要在app.use('/api', routes)这类路由挂载代码前执行app.use(cors(...))，否则路由不会应用CORS规则。
• 本地运行Express服务，用浏览器开发者工具查看响应头是否存在Access-Control-Allow-Origin字段。如果本地也没有，说明代码层面的CORS配置根本没生效，和Azure环境无关。
• 排查是否有其他中间件（如身份验证、异常拦截）提前拦截请求并返回响应，跳过了后续的CORS头添加逻辑。

2. 检查Azure平台的全局CORS设置 #

• Azure App Service自带CORS配置，会覆盖Express应用内的自定义CORS头。进入Azure Portal的API应用面板，找到CORS选项卡：
  • 如果这里已配置允许的源，Express的CORS设置会被忽略。要么清空此处设置，让Express自行处理；要么添加前端完整域名（含协议、端口，如https://your-frontend.azurewebsites.net）。
  • 注意：若Azure CORS设置填了*，不支持带身份凭证（Cookie、Authorization头）的请求；如果前端请求带凭证，必须明确指定允许的源，同时开启Access-Control-Allow-Credentials。
• 若使用了Azure Front Door或API Management，这些服务也有独立的CORS配置，需同步设置允许前端域名。

3. 用浏览器验证CORS预请求 #

Postman不会触发OPTIONS预请求，也不校验CORS头，所以它能访问不代表CORS配置正确。打开浏览器开发者工具的网络面板：

• 查看OPTIONS预请求的响应状态码，若返回404或无CORS相关头，说明服务器未正确处理预请求。Express的cors中间件默认会处理OPTIONS请求，但如果手动编写了OPTIONS路由，可能会发生冲突。
• 确认OPTIONS响应头包含Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等必要字段。

4. 排查前端请求的潜在问题 #

• 检查axios请求是否启用了withCredentials: true，若启用，CORS配置必须明确指定允许的源（不能用*），同时设置Access-Control-Allow-Credentials: true。
• 确认前端请求的API地址是否正确，协议（HTTP/HTTPS）是否与API一致，跨协议请求会直接触发CORS拦截。
• 排查前端静态资源缓存或环境变量问题：Azure日志出现http://localhost:8080，可能是前端打包时未替换测试环境的API地址，或者浏览器缓存了旧的静态资源，导致请求发往本地地址。

5. 确认Azure部署的代码正确性 #

• 通过Azure App Service的高级工具 > Kudu查看服务器上的代码，检查CORS中间件是否存在、加载顺序是否正确，确保部署的是最新的代码版本。
• 核对package.json的启动脚本，确认是否正确指向了带有CORS配置的入口文件，避免误启动未配置CORS的旧服务。

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