预检响应 FLASK CORS 中的 Access-Control-Allow-Methods 不允许方法 PUT答案

【问题标题】：Method PUT is not allowed by Access-Control-Allow-Methods in preflight response FLASK CORS预检响应 FLASK CORS 中的 Access-Control-Allow-Methods 不允许方法 PUT
【发布时间】：2019-04-28 01:00:44
【问题描述】：

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。我在反应应用程序上为此使用 axios。这是我的 call-api 函数。

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

【问题讨论】：

从 React 方面，在我看来你的实现是正确的，请检查如何处理烧瓶中的 cors。
我刚刚使用了 Flask-Cors。 @cross_origin() 装饰器，它应该很好地处理 CORS 请求。这就是为什么我很困惑为什么它不起作用。
我不是蟒蛇人。所以无法确认，但这可能会对您有所帮助：stackoverflow.com/questions/39550920/…

标签： python reactjs flask axios flask-cors

【解决方案1】：

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

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

不要被默认的“全部允许”所迷惑。您需要明确指定这一点。

我必须删除不必要的标头，例如 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

【讨论】：