Flask+React本地开发请求localhost接口触发CORS跨域错误如何解决？

问题根因 #

• 浏览器对127.0.0.1和localhost判定为不同源，即使两者都指向本地服务，跨域规则会单独校验
• 当你开启了support_credentials=True时，Flask-CORS不允许origins设为*，这是浏览器跨域的强制规则，带凭证的请求不允许通配符源
• 你同时给全局CORS和接口单独加了@cross_origin装饰器，可能出现配置冲突

修复步骤 #

1. 统一本地访问域名 #

要么把客户端请求的API端点从http://127.0.0.1:5000改成http://localhost:5000，要么把客户端地址也改成用127.0.0.1访问，保证两者域名完全一致。

2. 修正CORS配置适配带凭证场景 #

把服务端的ALLOWED_ORIGINS从*改成明确的允许源列表，本地开发时直接写对应客户端地址，部署环境再换成对应的线上域名：

# 本地开发环境配置示例
ALLOWED_ORIGINS = ["http://localhost:3000", "http://127.0.0.1:3000"]

如果需要动态适配多环境，可以改成判断环境变量加载不同的允许源列表，不要用通配符。

3. 清理重复CORS配置 #

要么保留全局CORS(app)的配置，要么单独给接口加@cross_origin装饰器，两者同时用大概率会出现响应头重复的问题，反而触发跨域报错。这里你已经配置了全局CORS，直接把接口上的@cross_origin(supports_credentials=True)删掉即可。

4. 客户端Axios配置对齐 #

给Axios请求加上withCredentials: true参数，和服务端配置保持一致：

axios.get(endpoint + "/api/rooms", { withCredentials: true })
// 也可以做全局配置
axios.defaults.withCredentials = true

验证方法 #

改完后重启Flask服务，清空浏览器缓存再测试，跨域报错即可消失。部署到Heroku的时候因为用的是同源或者明确的线上域名，没有本地127.0.0.1和localhost的差异问题，所以之前运行正常。

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