错误:对XMLHttpRequest的访问已被CORS策略Flask API+NodeJs阻止

Question

我在前端后端和Flask API之间有问题。

为了执行我的项目，我必须开始。这将在端口3000上运行ReactJs前端开发服务器。

在软件包.json 中

我添加了以下"proxy": "http://localhost:5000",

接下来，我做

cd后端&amp；激活我的venv 后的python server.py

这将在端口5000 上运行Flask API

Flask API有此路线

from flask_cors import cross_origin
# File download Link
@app.route('/filePath', methods=['POST'])
@cross_origin()
def get_path():
data = request.get_json()["path"]
storage.child(f"files/{data}").download(f"files/Resume.pdf")
return "Success.."

最后，在另一个shell中，我进行

cd后端&amp；节点server.js在端口8080 上运行

具有以下后

app.post('/insert', async (req, response) => {
const mobile_number = req.body.college_name
const name = req.body.college_name
axios.get('http://localhost:3000/details').then(async (res) => {
const recruit = new RecruitModel({
mobile_number:res.data.mobile_number, name:res.data.name,
});
await recruit.save()
response.send("inserted data")
});
});

这是前端发生错误的地方。

const uploadFiles = (file) => {
//
if (!file) return;
if (!initialData) return null;
const storageRef = ref(storage, `files/${file.name}`);
const uploadTask = uploadBytesResumable(storageRef, file);

uploadTask.on(
"state_changed",
(snapshot) => {
const prog = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(prog);
},
(error) => console.log(error),
() => {
getDownloadURL(uploadTask.snapshot.ref).then(async () => {
console.log(file.name);
await axios.post('http://localhost:5000/filePath', {
'path': file.name
}).then(() => console.log(file.name));
update();
});
}
);
};

等待axios.post('http://localhost:5000/filePath"我想。

我得到以下错误：

访问'XMLHttpRequesthttp://localhost:8080/insert'来自原点'http://localhost:3000'已被CORS策略阻止：对的响应飞行前请求未通过访问控制检查："Access Control Allow Origin"标头具有值'http://localhost:5000'不等于提供的原始

我以为使用flask cors可以解决这个问题，所以我不确定为什么会出现这个错误。

我真的很纠结这个错误，有什么建议吗？

编辑

const addRecruit = () => {
axios.post("http://localhost:8080/insert", {
college_name:initialData.college_name,
email:initialData.email, 
mobile_number:initialData.mobile_number, name:initialData.name
});
}

这就是问题发生的地方。因为数据是在Flask和ReactJs之间提取的，但这个/insert在server.js 中

Answer 1

EDIT明确表示，问题与Flask api无关。您需要在server.js 中启用cors

我想你以前也有过这种设置，

const cors = require('cors');
app.use(cors());

改为

const corsOptions ={
origin:'http://localhost:3000', 
credentials:true,            //access-control-allow-credentials:true
optionSuccessStatus:200
}
app.use(cors(corsOptions));

不要忘记npm i cors