我正试图使用Typescript创建一个简单的前端，并使用Flask创建一个后端服务器，并通过axios发送请求，就像我一直在使用的那样。不知怎么的，我在浏览器控制台中收到了这个奇怪的错误：
访问'XMLHttpRequesthttp://localhost:5000/api/test'来自原点'http://localhost:3000'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段内容类型。岗位http://localhost:5000/api/testnet:：ERR_FAILED
它说我的头中有一些字段由于CORS设置而非法。但问题是：
- 我在后端烧瓶服务器中设置了CORS：
在app/__init__.py:中
from flask import Flask, render_template, jsonify
from flask_cors import CORS
from random import *
import requests
def create_app(Config):
app = Flask(__name__)
CORS(app, support_credentials=True, resources={r"/*": {"origins": "*"}})
app.config.from_object(Config)
app.static_folder = app.config["STATIC_FOLDER"]
app.template_folder = app.config["TEMPLATE_FOLDER"]
with app.app_context():
from app.apis.routers import apis
app.register_blueprint(apis)
return app
在app/apis/routers.py:中
@apis.after_request
def creds(response):
response.headers['Access-Control-Allow-Credentials'] = 'true'
return response
@apis.route('/api/test', methods=["POST"])
@cross_origin(supports_credentials=True)
def test():
data = request.get_json()
print(data)
response = {
"orderTime": "123-456-789",
"eta": 123
}
return jsonify(response)
- 我最初使用的是标头
{withCredentials: true}。在看到这个错误后，我删除了标题，我发送的请求根本没有标题，但它仍然在对我大喊标题中有问题：
在customer.tsx:中
import React, {useState} from 'react';
import { useParams } from "react-router-dom";
import axios from 'axios';
import Button from '@mui/material/Button';
interface ParamTypes {
username: string,
order_id: string
}
interface headerTypes {
'Content-Type': string,
'Access-Control-Allow-Origin': string,
}
// interface Props {
// }
function CustomerContent() {
// constructor(props: Props) {
// super(props);
// }
let {username, order_id} = useParams<ParamTypes>();
console.log(username);
console.log("hi");
const [orderTime, setOrderTime] = useState(0);
const [ETA, setETA] = useState(0);
function buttonHandler() {
let payload = {
username: username,
order_id: order_id,
};
axios.request<ParamTypes, string>({
method: 'post',
url: 'http://localhost:5000/api/test',
data: payload,
})
.then(res => {
console.log(res)
})
setOrderTime(prev => prev + 1);
setETA(prev => prev + 1);
}
return (
<div>
<h1>Hello {username}, this page is for your order with ID: {order_id}</h1>
<p>order placed at: { orderTime } </p>
<p>ETA: { ETA }</p>
<Button variant="contained"
onClick={() => buttonHandler()}>Click to Update Order Status</Button>
</div>
)
}
export default function customer() {
return <CustomerContent />;
}
我的代码出了什么问题？
事实证明，根据如何在烧瓶中启用CORS，它只需要在后端的配置中进行简单的设置
感谢@mplungjan的帮助！