node.js - 请求的资源上不存在“Access-Control-Allow-Origin”标头。这已经在标题中传递了
问题描述
在我的 Axios 请求的标头中添加 'Access-Control-Allow-Origin': '*' 后,我仍然收到相同的错误。
从源“https://frontendURL”访问“http://backendUrlEndPoint”处的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有“Access-Control-Allow-Origin”标头存在于请求的资源上。
我在 express 服务器中使用了 cors 作为我的中间件。
const cors = require("cors");
app.use(cors());
我正在使用 Axios 进行 API 调用
const onClickHandler = async (e) => {
e.preventDefault();
try {
const res = await axios.post("http://backendUrlEndPoint", userDetails, {
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
});
console.log(res);
} catch (err) {
console.log(err);
}
};
解决方案
使用该配置,您可以省略 axios 第三个参数
{
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
}
}
服务器端肯定有问题。通过简单的服务器配置,一切都可以完美运行
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.post("/post", function (req, res) {
res.json({ msg: "ok" });
});
app.listen(5000, () => {
console.log('App listening at http://localhost:5000}');
});
推荐阅读
- pandas - 数据帧数组
- android-studio - 当我在 bluestacks 中运行它时,麦克风在我的应用程序中不起作用
- javascript - 如何使组件始终位于 react-leaflet 地图之上?
- javascript - 逐行分隔数组
- typescript - 隐藏 Mongoose 对象 Typescript 的属性
- node.js - MongoServerSelectionError:连接 ECONNREFUSED 127.0.0.1:27107
- express - 如何在猫鼬中填充对象数组
- micronaut - Micronaut:同一应用程序的多种安全配置
- c# - 如何在 c# 中将 OpenQA.Selenium.Chrome.ChromeDriver 保存到文件中
- javascript - 从嵌套的 json Api 迭代数据时遇到问题