python - 预检响应 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.

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

这是我的 flask 代码。

@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 来实现此目的。这是我的 call-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'])

不要被默认的“允许全部”所愚弄。您显然需要指定这一点。

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

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

奖金:

如果我的 api 调用返回预检请求的非 200 响应，则我遇到了问题，响应正文变为空。我刚刚在我的主应用程序中添加了这些代码行。我需要正文来了解错误的详细信息。

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