ReactJS前端无法向Flask后端发表单数据，CORS配置无效求助

报错信息 #

从源'http://localhost:3000'访问'http://localhost:5000/'的XMLHttpRequest被CORS策略阻止：预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'头。

不清楚哪里遗漏了，求指出需要修复的地方，谢谢！

编辑1：简化代码便于定位问题

React前端代码片段 #

import React, { useState } from 'react';
import axios from 'axios';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  const [destination, setDestination] = useState('Amsterdam');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const data = {
      destination: destination,
    };
    console.log(data);
    const response = await axios.post('http://localhost:5000/', data);
  };

  return (
    <div >
      <BrowserRouter>
        <Routes>
          <Route path="/" element={
            <div>
              <form onSubmit={handleSubmit} style={{ textAlign: "center" }}>
                <div>
                  <label>
                    Destination:
                    <input
                      type="text"
                      value={destination}
                      onChange={(e) => setDestination(e.target.value)}
                    />
                  </label>
                </div>
                <button type="submit">Submit</button>
              </form>
            </div>
          }>
          </Route>
        </Routes>
      </BrowserRouter>
    </div >
  );
}

export default App;

Flask后端代码片段（初始版本） #

from flask import Flask, render_template, request, redirect, session, url_for, jsonify
from flask_session import Session
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})

print("app.py running")

Session(app)

@app.route("/", methods=["GET", "POST"])
@cross_origin()
def index():
    print("function called")
    if request.method == "POST":
        print(request.form['destination'])
        return "success!"
    # Add the following lines to set the 'Access-Control-Allow-Origin' header
    response = jsonify({'message': 'Hello, World!'})
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

if __name__ == '__main__':
    app.run(debug=True)

编辑2：新增OPTIONS路由但仍报错

修改后的Flask后端路由代码：

@app.route("/", methods=["GET", "POST"])
@cross_origin()
def index():
    print("function called")
    if request.method == "POST":
        print(request.form['destination'])
        return "success!"

@app.route("/", methods=["OPTIONS"])
@cross_origin()
def handle_options_request():
    # Set CORS headers
    headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST',
        'Access-Control-Allow-Headers': 'Content-Type'
    }
    return ('', 204, headers)

问题根源与修复方案 #

核心问题 #

1. 路由冲突：同一个/路径下拆分多个方法路由，Flask无法正确匹配预检请求（OPTIONS），导致CORS头未正确返回。
2. 数据格式不匹配：前端Axios默认发送JSON格式数据，但后端用request.form读取表单格式数据，会导致读取失败，同时间接影响响应逻辑。
3. 重复CORS配置：手动添加的Access-Control-Allow-Origin头与flask-cors的全局配置冲突。

具体修复步骤 #

1. 合并路由，统一处理所有请求方法

删除单独的OPTIONS路由，将所有方法合并到同一个路由中，依赖flask-cors自动处理预检请求：

@app.route("/", methods=["GET", "POST", "OPTIONS"])
@cross_origin()
def index():
    if request.method == "POST":
        # 读取JSON格式请求体，适配Axios默认发送格式
        data = request.get_json()
        print(data['destination'])
        return jsonify({"status": "success!"})
    elif request.method == "GET":
        return jsonify({'message': 'Hello, World!'})
    # OPTIONS请求由flask-cors自动处理，无需额外逻辑
    return '', 204

2. 清理重复CORS配置

删除手动添加的response.headers.add('Access-Control-Allow-Origin', '*')，保留全局CORS配置即可：

# 全局配置已足够，无需额外手动设置
CORS(app, resources={r"/*": {"origins": "*"}})

3. 前端添加错误捕获（可选，便于调试）

给Axios请求增加错误捕获，方便排查问题：

const handleSubmit = async (e) => {
  e.preventDefault();
  const data = {
    destination: destination,
  };
  console.log(data);
  try {
    const response = await axios.post('http://localhost:5000/', data);
    console.log(response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

4. 确保依赖版本正确

升级flask-cors到最新版本，避免兼容性问题：

pip install --upgrade flask-cors

最终完整app.py示例 #

from flask import Flask, request, jsonify
from flask_session import Session
from flask_cors import CORS, cross_origin

app = Flask(__name__)
# 全局允许所有来源的跨域请求
CORS(app)

print("app.py running")

Session(app)

@app.route("/", methods=["GET", "POST", "OPTIONS"])
@cross_origin()
def index():
    if request.method == "POST":
        data = request.get_json()
        if not data or 'destination' not in data:
            return jsonify({"error": "缺少参数"}), 400
        print(data['destination'])
        return jsonify({"status": "success!"})
    elif request.method == "GET":
        return jsonify({'message': 'Hello, World!'})
    return '', 204

if __name__ == '__main__':
    app.run(debug=True)

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