在create-react-app中配置POST请求fetch Headers遇CORS及415问题求助

1. 先修正路由不匹配问题 #

客户端请求的URL是photo-rename/${id}，但服务端路由是/rename/<name>，路径完全不匹配！这会导致请求找不到对应的处理路由，服务端返回的默认响应（比如404）不会带上你手动设置的CORS头，直接触发CORS错误。

要么把客户端的URL改成rename/${id}，要么把服务端路由改成/photo-rename/<name>，先确保请求能命中正确的路由。

2. 用Flask-CORS替代手动处理CORS #

手动加响应头和处理OPTIONS请求很容易遗漏场景，直接用官方推荐的Flask-CORS库：

• 安装库：

pip install flask-cors

• 在Flask应用中初始化：

from flask_cors import CORS

APP = Flask(__name__)
CORS(APP)  # 开发环境全局允许跨域，生产环境可按需配置

这样所有路由会自动处理CORS相关的响应头和预检请求，不用再手动添加OPTIONS方法或设置Access-Control-Allow-Origin。

3. 清理客户端多余的请求头 #

你在客户端请求里加了Access-Control-Allow-Headers，这个是服务端返回给客户端的响应头，不是客户端要发的请求头，删掉它。正确的客户端请求头只保留Content-Type：

const headers = {
    'Content-Type': 'application/json',
};

4. 关于415错误的原因 #

当路由不匹配时，服务端返回的默认响应无法解析你发送的JSON数据，就会返回415错误；另外如果请求头被错误修改（比如因为mode: 'no-cors'），浏览器会强制把Content-Type改成text/plain，服务端自然无法识别JSON格式，也会返回415。

总结操作步骤 #

1. 对齐客户端和服务端的路由路径；
2. 安装并配置Flask-CORS处理跨域；
3. 删除客户端请求中多余的Access-Control-Allow-Headers头；
4. 去掉mode: 'no-cors'（这个模式会限制浏览器获取响应，仅适用于不需要读取响应的场景）。

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