为啥我的 axios 删除函数会出现 CORS 错误？ [关闭]

Posted 2023-03-04

【中文标题】为啥我的 axios 删除函数会出现 CORS 错误？ [关闭]

【英文标题】：Why is my axios delete function getting CORS errors? [closed]为什么我的 axios 删除函数会出现 CORS 错误？ [关闭]

【发布时间】：2021-05-10 18:10:20

【问题描述】：

我想不通！

（我已经修改了隐私代码......）

这行得通：

curl -vvv -H "Authorization: Bearer 3t8D7CeQ3MDPADCI" -X "DELETE" https://www.blockonomics.co/api/button?uid=8778e542911eb-ff979c

但在我的 Reactjs 模块中，这 不 工作：

// urlDelete = 'https://www.blockonomics.co/api/button?uid='
// item = '8778e542911eb-ff979c'

const handleDelete = async (item) =>    
    const url = urlDelete + item

    await axios
      .delete(url, 
        headers: 
          Authorization: 'Bearer 3t8D7CeQ3MDPADCI',
        ,
      )
      .then((res) => 
        console.log(res.status)
      )
  

错误：

未处理的拒绝（错误）：网络错误 405 方法不允许 CORS 缺少允许来源 跨源请求被阻止：同源策略不允许读取位于https://www.blockonomics.co/api/button?uid=8778e542911eb-27ffea 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。 跨域请求被阻止：同源策略不允许读取位于https://www.blockonomics.co/api/button?uid=8778e542911eb-27ffea 的远程资源。 （原因：CORS 请求未成功）。

我尝试向 url 添加一个 cors-anywhere 代理，但没有成功。我试过使用 'GET' 和 'POST'，还是没有。

为什么 curl 命令有效，而 axios 函数无效？

我非常感谢您对此提出一些建议。我被困住了！

【参考方案1】：

CORS 特定于浏览器，cURL 在浏览器之外运行。出于安全原因，浏览器不允许从一个地方（如本地主机）提供服务的 JS 访问另一个域上的资源，除非响应实际上说：“是的，我可以使用 localhost 或 sandys-server.com 进行此调用”或“我对任何人、任何地方都可以打这个电话”。由于 blockonomics.co 没有返回我可以看到的任何 CORS 信息，因此您的浏览器不会让您进行此调用。您可以在浏览器中禁用 CORS（请参阅 this answer），但您不应该。另外，如果您的应用应该被其他人使用，那么在他们使用它之前很难让他们禁用 CORS，所以这是一种自我解禁的方式。

如果您无法控制 blockonomics.co 返回的标头，您有两种选择：

代理您的 API 请求。你可以在本地运行一些东西（nginx，一个小的 Flask 应用程序），它将你的请求传递给 blockonomics，并在响应中添加一个允许的 CORS 标头。如果您希望您的应用程序在本地开发环境之外运行，您还需要在 Internet 上安装该代理。请记住，其他人将能够使用它，因此您可能不想在回复中使用通配符！

在本地模拟响应，可能作为测试的一部分，如果您在生产中不会遇到此问题。

【讨论】：

感谢您抽出宝贵时间回答我，Jim。 CORS 对我来说仍然是一个非常令人困惑的概念，但是您已经对这个主题有所了解。谢谢你。我最终使用了 Cloudfare 工作人员。我惊慌失措地写了一个，里面有一个小错误。我还以为我的电脑闹鬼了，这就是为什么我第一次认为它没有工作的原因......但是......问题终于解决了。发现小错误。恐慌消退。我认为您的解释将帮助许多其他在同一问题上苦苦挣扎的人。再次感谢您的时间和清晰的解释:)