由于 CORS 错误，POST 请求在反应 axios 中被阻止 [重复]答案

【问题标题】：POST request blocked in react axios due to CORS error [duplicate]由于 CORS 错误，POST 请求在反应 axios 中被阻止 [重复]
【发布时间】：2020-09-29 10:23:17
【问题描述】：

我正在尝试向包含多部分数据的 API 发送 POST 请求。

我在 postman 中测试了 API，在 Postman 中一切正常。但是当我在反应中调用 API 时，它给了我 CORS 错误。

我交叉检查了 URL、标题和数据，对我来说一切正常。我经历了关于同一主题的多个 Stack Overflow 问题，发现我需要将 allow-cross-origin 与标题一起传递。我在标题中添加了它，但无法解决我的问题。

我在控制台得到的错误是：

No 'Access-Control-Allow-Origin' header is present on the requested resource

API 调用代码

import axios from 'axios';

const header = {
    "userid":localStorage.getItem("userid"),
    "token":localStorage.getItem("token"),
    "Content-Type": "multipart/form-data",
    "Access-Control-Allow-Origin": "*"
  }

const URL="https://api.hello.com/dashboard/venue_updated";

export function updateVenue(data,name,venue_type,email, phone_no,callback, errorcallback){
    console.log(header);
    axios.post(URL,data,{
        params:{
            name,
            venue_type,
            email,
             phone_no,
        },
        headers:header
    })
    .then(res => {
      if(callback != null){
         callback(res);
      }
    })
    .catch(err => {
      if(errorcallback != null){
         errorcallback(err);
      }
    })
}

我曾经在我的组件中导入它并在表单提交方法中调用它。

【问题讨论】：

您使用哪种后端技术？
您在后端 api 端添加标头，如下所述。根据您使用的后端框架，实现可能会有所不同

标签： reactjs typescript axios cors

【解决方案1】：

你必须像这样添加你的后端。（本例为nodejs）

app.use(cors(), function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000"); // update to match the domain you will make the request from
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

用于启用所有 CORS 请求

app.use(cors());

【讨论】：

如果我在“Access-Control-Allow-Origin”字段中输入“*”，它是否适用于所有域。
是的，它适用于所有域。
我更新了标题，但是问题没有解决。
分享您在 que 中所做的事情。确保您在后端进行更改。
prnt.sc/swzd4z

【解决方案2】：

在 React 中使用该标头调用 axios 并不能解决 CORS。服务器的响应必须有"Access-Control-Allow-Origin": "*"

检查网络选项卡并查看服务器的响应。

【讨论】：

【解决方案3】：

如果您有权访问此 URL 代码并启用 CORS 设置。 https://api.hello.com/dashboard/venue_updated

【讨论】：