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

不要被默认为all 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

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

1 个答案: