React+Flask聊天机器人应用中CORS策略拦截Fetch请求求助

问题核心 #

错误提示显示预检请求（OPTIONS）未通过访问控制检查，原因是没有返回HTTP 200 OK状态。这说明浏览器自动发送的OPTIONS请求没有被后端正确响应，即使你已经启用了flask-cors。

解决方案 #

1. 统一前后端域名（最简临时方案） #

浏览器会将localhost和127.0.0.1视为不同源，修改前端fetch请求的URL，与后端域名保持一致：

fetch("http://localhost:5000/predict", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ message: userInput })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Flask后端默认运行在localhost:5000，无需额外修改。

2. 显式处理OPTIONS请求并配置精准CORS规则 #

修改Flask后端代码，确保预检请求被正确响应，同时指定允许的源、方法和请求头：

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 针对/predict接口配置CORS规则
CORS(app, resources={
    r"/predict": {
        "origins": "http://localhost:3000",  # 允许的前端源
        "methods": ["POST", "OPTIONS"],      # 包含预检的OPTIONS方法
        "allow_headers": ["Content-Type"]    # 允许的请求头
    }
})

@app.route('/predict', methods=['POST', 'OPTIONS'])
def predict():
    # 直接响应预检请求
    if request.method == 'OPTIONS':
        return '', 200
    # 处理POST请求逻辑
    data = request.get_json()
    response = {"reply": "Processed message"}
    return jsonify(response)

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

3. 排查其他拦截请求的中间件 #

如果你的Flask应用启用了CSRF保护（比如flask-wtf的CSRFProtect），它可能会拦截OPTIONS请求。可以临时禁用测试，或者为OPTIONS请求添加豁免：

from flask_wtf.csrf import CSRFProtect

csrf = CSRFProtect(app)

# 豁免OPTIONS请求的CSRF检查
@app.before_request
def exempt_options():
    if request.method == 'OPTIONS':
        return '', 200

关键说明 #

• 预检请求（OPTIONS）是浏览器跨域请求前的自动检查步骤，后端必须返回200 OK状态，后续POST请求才能正常发送。
• flask-cors默认会自动处理OPTIONS请求，但如果路由只声明了POST方法、配置规则不明确，可能导致处理失效，显式添加OPTIONS方法到路由中可避免此问题。

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