Flask-CORS不为POST工作，但为GET工作

Question

我在本地运行一个Flask-Restful API，并从不同的端口发送包含JSON的POST请求。我得到错误

No 'Access-Control-Allow-Origin' header is present on the requested resource.

但是，当我运行 时

curl --include -X OPTIONS http://localhost:5000/api/comments/3
        --header Access-Control-Request-Method:POST
        --header Access-Control-Request-Headers:Content-Type
        --header Origin:http://localhost:8080

我

HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Allow: HEAD, GET, POST, OPTIONS
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Vary: Origin
Access-Control-Allow-Headers: Content-Type
Content-Length: 0

显示"Access-Control-Allow-Origin"为"*"GET工作得很好，只是POST给出了这个错误。哪里出了问题?如果相关的话，对于前端，我使用react并通过axios请求。

Answer 1

在我的例子中，由于内部错误引发了CORS错误。这是一个与CORS完全无关的错误，它应该返回500。

Answer 2

你必须将CORS(app, resources={r"/*": {"origins": "*"}})添加到你的flask应用程序中。

希望这能解决问题。

Answer 3

Flask-Cors文档解释了为什么会发生这种情况

"当使用JSON跨源时，浏览器将为POST请求发出预发送选项请求。为了让浏览器允许带有JSON内容类型的POST请求，您必须允许content - type报头。最简单的方法是在应用程序上设置CORS_HEADERS配置值。"

https://flask-cors.readthedocs.io/en/1.9.0/

app.config['CORS_HEADERS'] = 'Content-Type'

Answer 4

在Post请求浏览器发送一个OPTIONS请求作为飞行前请求，然后再执行Post，因此在服务器上启用OPTIONS请求，并使用适当的CORS标头将解决此问题。

CORS (Cross-Origin Resource Sharing，跨域资源共享)错误发生在浏览器中运行的web应用程序试图向不同的域(源)发出请求时。出于安全原因，CORS是web浏览器默认实现的一种安全机制，用于防止跨域请求。CORS错误背后的基本逻辑如下:

1. 当在浏览器中运行的web应用程序向不同的域时，浏览器会自动发送一个名为a的HTTP请求"preflight"请求检查是否允许跨域请求。飞行前请求为OPTIONS类型。

2. 接收预飞行请求的服务器必须以适当的CORS标头，指示允许跨域请求。

3. 如果服务器没有响应必要的CORS头或响应如果标头不正确，浏览器将阻止实际请求并抛出歌珥错误。

服务器应该在其响应中包含的CORS头是:

1. Access-Control-Allow-Origin:指定交叉允许的原点起源的请求。它可以是一个特定的域或允许来自的"*"任何起源。

2. Access-Control-Allow-Methods:指定允许的HTTP方法跨域请求，如GET、POST、PUT、DELETE等

3. Access-Control-Allow-Headers:指定交叉允许的报头来源请求，如Content-Type, Authorization等

4. Access-Control-Allow-Credentials:可选的头信息，指示是否使用浏览器应该包含凭证(例如，cookie, HTTP身份验证)在跨域请求中

我使用azure函数httpTrigger在我的flask应用程序中运行http post请求。所以在函数中允许选项请求。json文件为我解决了这个问题。

"methods"("get","post","options"]