首页 > 解决方案 > 请求的资源上不存在“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);
    }
};

标签: node.jsexpressaxioscors

解决方案


使用该配置,您可以省略 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}');
});

推荐阅读