尽管包含了flask_cors，为什么React对Flask的调用会因CORS而失败

Question

我需要将数据从烧瓶读取到反应中。 反应：

const data = {
        name: 'John',
        email: '[email protected]'
    };

    axios.post('http://127.0.0.1:5000/api/data', data)
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.log(error);
        });

烧瓶：

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

app = Flask(__name__)
CORS(app, origins='http://localhost:3000')

@app.route('/api/data', methods=['POST'])
def process_data():
    data = request.get_json()
    # обработка данных
    response_data = {'message': 'Sucsess'}
    return jsonify(response_data), 200


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

我在浏览器中收到错误：从源“http://localhost:3000”访问“http://127.0.0.1:5000/api/data”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 ShortPage.jsx:24 AxiosError {消息：'网络错误'，名称：'AxiosError'，代码：'ERR_NETWORK'，配置：{...}，请求：XMLHttpRequest，...}

我该如何解决这个问题？

Answer 1

问题在于您将路径 /api/data 限制为 http 方法 POST

@app.route('/api/data',methods=['POST'])

CORS 要求客户端在该路径上进行

OPTIONS

“飞行前”调用，以找出允许哪些来源（以及标头等其他内容）。因为您的代码只允许

POST

OPTIONS

调用被拒绝，CORS 机制失败。

修复方法是将

OPTIONS

添加到路线上允许的方法列表中。

@app.route('/api/data', methods=['POST', 'OPTIONS'])