飛行前響應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將是我應該解決的障礙之一。

這是我的燒瓶代碼。

@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'])

默認為allow all，請不要上當。 您顯然需要指定此。

我必須刪除不必要的標頭，例如Accept和Access-Control-Allow-Origin。 像這樣更新我的axios：

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

獎金：

如果我的api調用返回了一個非200的預檢請求響應，則我遇到了一個問題，響應主體變為null。 我只是在主應用程序中添加了這些代碼行。 我需要正文以獲取錯誤的詳細信息。

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