即使标题正确，POST 调用也会返回 CORS 错误答案

【问题标题】：POST call return CORS error even with right headers即使标题正确，POST 调用也会返回 CORS 错误
【发布时间】：2021-06-23 09:50:38
【问题描述】：

我正在尝试进行第一次 POST 调用，但收到一条错误提示

“从源 'http://localhost:8080' 访问 'url' 处的 XMLHttpRequest 已被 CORS 策略阻止：请求标头字段内容类型为预检响应中的 Access-Control-Allow-Headers 不允许。"

以下是我的代码

methods: {
 uploadData(){
      axios
        .post(
          "url",
          this.data,
      {
        headers: {'X-Requested-With': 'XMLHttpRequest'},
      }
        )
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {
          console.log("Error", err);
        });
  }
}

我读了here，如果发送的标头错误，它会发生，但我删除了标头。在网络选项卡中，它显示 CORS 错误。

【问题讨论】：

这能回答你的问题吗？ Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response
@samuei 我不明白链接的答案，因为我对 API 很陌生，所以一切都在我之上。有什么好的基础视频教程吗？
您发布数据的“url”必须返回 HTTP 标头 Access-Control-Allow-Headers: DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,Accept,Origin
您需要在后端应用的 CORS 中允许您的前端应用。 100 秒的视频，解释其工作原理：youtu.be/4KHiSt0oLJ0
什么是“url”或者您是否删除了该 URL？您还可以向我们展示您的后端代码吗？您收到此错误是因为您可能没有为您的后端设置 CORS

标签： ajax vuejs2 axios

【解决方案1】：

这主要是在后端， 每当您从 google.com(client) 到 yahoo.com(backend) 进行 API 调用时，它都会失败，因为 yahoo 不允许 Google 访问其数据。（一个有趣的答案）但这就是跨域资源共享发挥作用的地方，雅虎将允许来自 google.com 的几种请求，为了实现这一点，首先发出一种特殊的 API 请求，称为 OPTIONS 请求又称飞行前检查，就像飞机实际起飞前所做的那样。根据此 OPTIONS 请求的响应，您的 POST、GET、PUT...等将起飞。因此您的后端需要处理此 OPTIONS API 请求。

希望这可以消除 AIR 中的一些疑问

【讨论】：

【解决方案2】：

正如你所提到的，你正在发送“headers: {'X-Requested-With': 'XMLHttpRequest'}”，我不明白为什么你需要在 header 中设置它而不是你可以试试标头：{'Content-Type': 'application/json'}，

  const headers = {
    'Content-Type': 'application/json'
} 
 axios.post('/url',{headers:headers}).then((response)=>{
      
            
            if(response){
                console.log(response);
            }
        }).catch((err)=>{
            console.log(err)
        })

但是去除CORS错误还不够，你必须在服务器端设置CORS属性，你可以试试下面的代码-

        <?php 
    if (isset($_SERVER['HTTP_ORIGIN'])) 
        {
            header("Access-Control-Allow-Origin: *");
            header("Access-Control-Allow-Credentials: true");
            header("Access-Control-Max-Age: 86400");
        }

        if ($_SERVER['REQUEST_METHOD']=='OPTIONS') 
        {
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
                header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, PATCH");         

            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
                header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

            exit(0);
            }
        }
    
    ?>

【讨论】：

【解决方案3】：

您向其发送POST 请求的服务器需要在其响应中包含Access-Control-Allow-Headers。在您的情况下，这是您在对运行在 http://localhost:8080 上的服务器的请求中指定的标头。

headers: {'X-Requested-With': 'XMLHttpRequest'}

这是因为由服务器决定是否允许跨域请求，并且它允许您发送给它的 Content-Type 请求标头 (X-Requested-With: XMLHttpRequest )。客户端永远无法自行决定给定服务器应该允许 CORS。

了解更多关于 CORS 的链接：

要详细了解如何找出 CORS 错误：CORS errors doc

如果您是 CORS 的新手，您可以在此处阅读更多信息：CORS doc

解释 CORS 的视频：REST - API CORS

如何在 spring 中启用 CORS 例如：Java Spring Enable CORS

【讨论】：

【解决方案4】：

根据错误的描述，您似乎需要注意两件事。

让您的后端服务器发送具有正确值（“*”或请求中的 URL）的适当“Access-Control-Allow-Origin”标头
创建将使用 OPTIONS 方法处理调用的路由，该方法返回正确的“Access-Control-Allow-Headers”值。

那里有很多关于 CORS 的信息。我希望以下 Youtube 视频能给你一个更详细的概述：

https://www.youtube.com/watch?v=gPzMRoPDrFk

https://www.youtube.com/watch?v=tcLW5d0KAYE

Mozilla 开发者网络网站记录了有关您的浏览器发出的预检请求的所有详细信息，该请求包含您报告的错误结果。 MDN Website

【讨论】：