gpt4 book ai didi

reactjs - fetch 总是通过 OPTIONS 方法

转载 作者:行者123 更新时间:2023-12-05 00:59:52 25 4
gpt4 key购买 nike

我用 flask-restplus 制作了 API 服务器。

同时使用 cors 模块来避免 CSP 问题。

前端是 React.js。

我的代码在这里。

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

React.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

我该如何解决这个问题?

最佳答案

那个OPTIONS请求叫做pre-flight request
在某些与 CORS 相关的情况下,Web 浏览器会首先向服务器发送 pre-flight request 以检查您的域是否允许向服务器发出请求。如果服务器说 yes 那么你的实际 POST 请求将被发送。否则,将不会发送额外的请求,并且网络浏览器会向您发送错误消息。

这是关于飞行前请求的文档:
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1#preflight-requests

根据文档:

The pre-flight request uses the HTTP OPTIONS method.

关于reactjs - fetch 总是通过 OPTIONS 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51923931/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com