飞行前响应 FLASK CORS 中的 Access-Control-Allow-Methods 不允许方法 PUT

Question

GET 工作正常。我似乎无法使 PUT 正常工作，而且我担心 POST 也无法正常工作。

一直有错误

Access to XMLHttpRequest at '<...>' from origin 'https://localhost:3000' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

我有一个调用外部 api 的本地 Web 应用程序，这意味着 CORS 将是我应该解决的障碍之一。

这是我的烧瓶代码。

@blueprint.route('/profiles/<oi_id>', methods=['POST'])
@cross_origin(send_wildcard=True, methods=['POST', 'OPTIONS'])
def create_checkin_profile(oi_id):
    return jsonify(cph.create_owner_profile_info(oi_id, json.loads(request.data)))


@blueprint.route('/profiles/<oi_id>', methods=['PUT'])
@cross_origin(send_wildcard=True, methods=['PUT', 'OPTIONS'])
def edit_checkin_profile(oi_id):
    return jsonify(cph.edit_owner_profile_info(oi_id, json.loads(request.data)))

这很令人困惑，因为我很确定我允许 PUT。我在 React 应用程序上为此使用了 axios。这是我的调用-api 函数。

axios({
      method: 'PUT',
      url: url,
      timeout: 3000,
      data: data,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });

Answer 1

好的，我解决了这个问题。显然根据文档，我必须在跨源请求上指定 "Content-Type" 。像这样：

@cross_origin(allow_headers=['Content-Type'])

不要被默认的全部允许所迷惑。您显然需要指定这一点。

我必须删除不必要的 headers，例如 Accept 和 Access-Control-Allow-Origin。像这样更新我的 axios：

axios({
    method: 'PUT',
    url: url,
    timeout: 3000,
    data: data,
    headers: {
        "Content-Type": "application/json",
    },
});

奖金：

如果我的 api 调用返回带有预检请求的非 200 响应，我运行就会遇到问题，响应 body 变为空。我刚刚在我的主应用程序中添加了这些代码行。我需要 body 那里有错误的详细信息。

@app.after_request
def set_cors_header(response):
    response.headers['Access-Control-Allow-Origin'] = '*'
    return response

飞行前响应 FLASK CORS 中的 Access-Control-Allow-Methods 不允许方法 PUT

Method PUT is not allowed by Access-Control-Allow-Methods in preflight response FLASK CORS

python

reactjs

flask

axios

flask-cors