如何通过API在localhost上设置Cookie？CORS报错该如何排查？

你的问题大概率是服务端CORS配置细节缺失导致，和CRA本地开发服务器无关，你可以按以下优先级逐一排查：

1. 核对允许的源地址配置 #

首先确认你本地CRA启动的实际访问地址是否完全匹配Flask CORS配置origins列表里的项：

• 必须完全匹配协议（http/https）、域名、端口，缺一个都不行
• 如果你本地修改过CRA默认启动端口，要把对应地址（比如http://localhost:3001）加到origins列表中

2. 补全允许的请求头配置 #

你当前只配置了CORS_HEADERS = 'Content-Type'，带withCredentials的跨域请求不允许用通配符匹配请求头，必须显式列出所有请求中带的自定义头：

• 如果你的axios请求携带了Authorization、X-Requested-With等自定义头，需要全部加入配置，示例：

crm_application.config['CORS_HEADERS'] = 'Content-Type, Authorization, X-Requested-With'

3. 检查Set-Cookie属性配置 #

新版Chrome、Edge等浏览器对跨站Cookie有强制安全限制，你前端是http://localhost、后端是https://api.com属于跨站场景，后端返回的Set-Cookie必须同时满足两个条件才能被浏览器正常写入：

• 必须显式设置SameSite=None
• 必须附带Secure属性（要求请求必须走HTTPS协议）
  如果本地调试不想改HTTPS，可以临时把后端改成HTTP部署，规避这个限制。

本地开发临时解决方案 #

如果只是开发阶段想快速绕过跨域问题，可以直接用CRA自带的代理能力：

1. 在项目package.json中新增配置项："proxy": "https://api.com"
2. axios请求地址从全路径改为相对路径：axios.post('/login', values, { withCredentials: true })
   这种方式所有请求会走本地开发服务器转发，完全不会触发CORS校验。

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