由于 CORS 错误，React axios 中的 POST 请求被阻止

Question

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

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

我交叉检查了 URL、标头和数据，对我来说一切似乎都正常。我浏览了有关同一主题的多个堆栈溢出问题，发现我需要将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);
      }
    })
}

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

Answer 1

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

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