时间戳

首页 > 解决方案 > 为什么我的 axios 删除函数会出现 CORS 错误？

reactjs - 为什么我的 axios 删除函数会出现 CORS 错误？

问题描述

我想不通！

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

这有效：

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)
      })
  }

错误：

我尝试将 cors-anywhere 代理添加到 url，但没有成功。我试过使用'GET'和'POST'，仍然没有。

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

我真的很感激对此的一些建议。我被困住了！

标签： reactjscurlaxioscors

解决方案

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

如果您无法控制 blockonomics.co 返回的标头，您有几个选项可以继续前进：

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

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

推荐阅读