Flask与NextJS对接时POST请求出现CORS跨域错误如何解决

问题原因 #

• 第一优先级错误：前后端接口路径不匹配
  后端Flask定义的接口路由是/predict，但前端fetch请求的地址是http://127.0.0.1:5000/sentiment，路径完全不对应，所以所有请求（包括CORS预检用的OPTIONS请求）都会返回404，触发CORS报错。
• 第二点补充：你的Flask路由仅允许POST方法，没有兼容CORS预检必须的OPTIONS方法，即使路径匹配也可能出现预检失败问题。

修复方案 #

1. 首先对齐两端接口路径，二选一即可：
   • 修改Flask的路由定义，把@app.route('/predict', methods=['POST'])改成@app.route('/sentiment', methods=['POST', 'OPTIONS'])
   • 或者修改前端fetch的请求地址为http://127.0.0.1:5000/predict
2. 优化Flask的CORS配置，明确适配本地开发场景：
   把原有cors = CORS(app)替换为：

   CORS(app, origins=["http://localhost:3000"], methods=["GET", "POST", "OPTIONS"], allow_headers=["Content-Type"])
   

3. 可选：在接口逻辑开头补充OPTIONS预检请求的处理逻辑，避免出现异常：

   @app.route('/sentiment', methods=['POST', 'OPTIONS'])
   def predict():
       if request.method == 'OPTIONS':
           return jsonify({'code': 200}), 200
       # 原有POST逻辑保持不变
   

修改完成后重启Flask服务，再发起请求即可正常返回结果。 #

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