获取始终使用 OPTIONS 方法传递

Question

我用flask-restplus做了API服务器。

还可以使用 cors 模块来避免 CSP 问题。

前端是 React.js。

我的代码在这里。

class ArticleList(Resource):
def post(self):
print(1)
return {"status":"true", "result":"article write success"}, 200

反应.js代码在这里。

_writeArticle = () => {
const { title, body, tags, password } = this.state;
const data = {title: title, body: body, tags: tags, password: password};
fetch("http://127.0.0.1:5000/article/", {
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json"
},
body: data
})
.then(res => {
if(res.status === 200) {
return <Redirect to='/' />
} else {
alert("error");
}
})
.catch(err => console.log(err))
}

我定义了POST的方法。但是，它使用OPTIONS方法请求。

在谷歌中搜索后，该问题由CORS引起。

所以我像这样将 cors 定义为主代码。

from flask import Flask
from flask_restplus import Api, Resource
from api.board import ArticleList, Article
from flask_restplus import cors
app = Flask(__name__)
api = Api(app)
api.decorators=[cors.crossdomain(origin='*')]
api.add_resource(ArticleList, '/article')
api.add_resource(Article, '/article/<int:article_no>')
if __name__ == '__main__':
app.run(debug=True)

但它仍然要求OPTIONS.

如何解决此问题？

Answer 1

OPTIONS请求称为pre-flight request。
在某些情况下，与CORS有关，Web浏览器将首先向服务器发送pre-flight request，以检查是否允许您的域向服务器发出请求。如果服务器显示yes则发送您的实际POST请求。否则，不会发送其他请求，并且 Web 浏览器将向您吐出错误。

这是有关pre-flight request的文档：
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1#preflight-requests

根据文档：

预检请求使用 HTTP 选项方法。

Answer 2

这是我的解决方案，

from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)