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

Posted 2023-02-22

技术标签:

【中文标题】即使标题正确，POST 调用也会返回 CORS 错误【英文标题】：POST call return CORS error even with right headers 【发布时间】：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 【参考方案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】：