请求的资源上不存在“Access-Control-Allow-Origin”标头。这已经在标题中传递了

Posted 2023-03-04

【中文标题】请求的资源上不存在“Access-Control-Allow-Origin”标头。这已经在标题中传递了

【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource. That has already been passed in the headers

【发布时间】：2021-11-17 15:17:23

【问题描述】：

在我的 Axios 请求的标头中添加 'Access-Control-Allow-Origin': '*' 后，我仍然收到相同的错误。

从源访问“http://backendUrlEndPoint”处的 XMLHttpRequest “https://frontendURL”已被 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);
    
;

【问题讨论】：

您需要在server 上进行配置，问题是缺少响应而不是请求的标头

@HarshitRastogi 我也有类似的问题。它不适用于所有前端平台，即 Web、移动应用程序。但仅适用于一些设备，如 html 播放器或一些鲜为人知的浏览器。如果你能再解释一下。

@HarshitRastogi 甚至检查响应标头“Access-Control-Allow-Origin”：“*”，对所有人都是允许的。

它对我不起作用

【参考方案1】：

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

【讨论】：

我也试过了，还是不行。

所以肯定是其他地方有问题。你是在本地还是远程地址上工作？

我已经在 Heroku 上部署了我的后端，并在 localhost 和远程上使用了前端，两者都给出了相同的错误。