Flask+TS前后端项目axios发请求报CORS content-type不允许错误如何解决

• axios发送携带JSON格式body的POST请求时，会自动将Content-Type设置为application/json，这类请求属于非简单请求，浏览器会先发送OPTIONS预检请求校验跨域权限，你当前的CORS配置未明确允许Content-Type请求头，导致预检不通过。
• 配置冲突：你同时使用了全局CORS初始化、蓝图after_request手动加响应头、接口@cross_origin装饰器三类跨域配置，多套配置优先级冲突导致规则失效。
• 规则不兼容：你配置了supports_credentials=True（允许跨域传凭证）的同时将origins设为*，这是CORS策略明确禁止的组合，允许传凭证时必须指定明确的允许源，不能用通配符。

1. 修改全局CORS配置，打开app/__init__.py，将原CORS初始化代码替换为以下内容：

CORS(app, 
     supports_credentials=True, 
     resources={r"/*": {
         "origins": ["http://localhost:3000"], # 明确填写前端的访问地址
         "allowed_headers": ["Content-Type"], # 显式允许请求头
         "methods": ["GET", "POST", "OPTIONS"] # 允许的请求方法
     }})

如果后续不需要跨域传递cookie、授权凭证等，可以将supports_credentials改为False，origins可以改回"*"。

2. 移除冗余的跨域配置：

• 删除app/apis/routers.py中的creds after_request函数，全局配置已经自动处理凭证响应头
• 删除test接口上的@cross_origin(supports_credentials=True)装饰器，避免和全局配置冲突

3. 清理前端无用代码：
   删除customer.tsx中无用的headerTypes接口，Access-Control-Allow-Origin是后端返回的响应头，前端请求中不要主动携带该字段，否则会额外触发跨域校验。

修改完成后重启Flask服务即可解决报错。

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