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

Question

我想不通！

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

这行得通：

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 函数无效？

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

Answer 1

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

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

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

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