我正在按照本教程構建一個帶有 Flask 后端和 React 前端的應用程式。當我運行該應用程式時，它會引發如下所示的錯誤：
- 預檢回應不成功
- 由于控制檢查，Fetch API 無法加載 https://localhost/articles
我遇到的錯誤
我查看了其他堆疊溢位問題，但我看到的似乎都沒有。這是一些代碼。作為參考，您可以查看我發布的教程鏈接。
我的路線.py：
...
app = create_app()
@app.route("/articles/", methods=["GET"], strict_slashes=False)
def articles():
articles = Articles.query.all()
results = articles_schema.dump(articles)
return jsonify(results)
...
我的應用程式.py：
...
db = SQLAlchemy()
migrate = Migrate()
ma = Marshmallow()
cors = CORS()
def create_app():
"""Application-factory pattern"""
app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db"
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app(app)
migrate.init_app(app, db)
ma.init_app(app)
cors.init_app(app)
...
我的 App.js：
function App() {
const [articles, setArticles] = useState([])
// Modify the current state by setting the new data to
// the response from the backend
useEffect(() => {
fetch("http://localhost:5000/articles", {
methods: "GET",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((response) => setArticles(response))
.catch((error) => console.log(error))
}, [])
return (
<div className="App container m-4">
<div className="row">
<div className="text-center">
<h1>Connecting a React Frontend to a Flask Backend.</h1>
</div>
</div>
<ArticleList articles={articles} />
</div>
文章串列.js
const ArticleList = (props) => {
return (
<div className="m-2">
{/* Display the article details if article is not None */}
{props.articles &&
props.articles.map((article) => {
return (
<div key={article.id}>
<h2 className="text-primary"> {article.title} </h2>
<p> {article.body} </p>
<p> {article.date} </p>
<hr />
</div>
)
})}
</div>
)
}
export default ArticleList
uj5u.com熱心網友回復：
這是一個 CORS 問題。這是您在 App.js 中獲取資料的方式的問題
嘗試以下標題 -
const headers = new Headers();
headers.set('Accept', 'application/json');
headers.set('Access-Control-Allow-Credentials', 'true');
headers.set('Access-Control-Allow-Origin', 'true');
headers.set('Content-Type', 'application/json');
const response = await fetch(url, {'GET', headers})
.then(r => r.json()).catch(onError);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/467336.html