为什么我不能发出这个 axios DELETE 请求？ [复制]答案

【问题标题】：Why can't I make this axios DELETE request? [duplicate]为什么我不能发出这个 axios DELETE 请求？ [复制]
【发布时间】：2021-06-27 19:48:28
【问题描述】：

React / Firebase 项目。正在尝试删除文档。

错误消息：从源“http://localhost:3000”访问 XMLHttpRequest 已被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Methods 不允许方法 DELETE。

我添加了 Access-Control-Allow-Methods 和 Access-Control-Allow-Origin 标头来尝试修复它，但没有效果。

    firebase
      .auth()
      .currentUser.getIdToken(true)
      .then((token) => {
        console.log(token)
        return axios.delete(
          `${FunctionsDir}/deleteMessage`,
          {
            messageID: messageID,
          },
          {
            headers: {
              Authorization: `Bearer ${token}`,
              'content-type': 'application/octet-stream',
              'Access-Control-Allow-Methods': 'DELETE',
              'Access-Control-Allow-Origin': 'http://localhost:3000',
            },
          }
        )
      })

【问题讨论】：

查看 CORS 以获取详细信息，但这意味着请求源（即 localhost）不允许向请求目标（即${FunctionsDir}/deleteMessage）发出请求。您的 COR 标头没有帮助，因为目的地而不是来源决定了接受来自谁的请求。 IE。银行必须批准您的贷款，而不是相反。
在这种情况下，firebase 的服务器是您需要配置 CORS 策略的地方

标签： javascript reactjs firebase axios cors

【解决方案1】：

查看 CORS 以获取详细信息，但这意味着请求源（即 localhost）不允许向请求目标（即${FunctionsDir}/deleteMessage）发出请求。您的 COR 标头没有帮助，因为目的地而不是来源决定了接受来自谁的请求。 IE。银行必须批准您的贷款，而不是相反。

前进的方向是放宽服务器上的 CORS 政策（${FunctionsDir}/deleteMessage 指向的任何地方）。

值得指出的是，CORS 是浏览器强制执行的。因此，如果您无法控制服务器，则可以通过不使用浏览器来解决 CORS。例如。您可以使用节点或电子应用程序而不是浏览器网页。

最后，如果您无法控制服务器但必须通过浏览器进行部署，那么您可以创建代理服务器。您的网页会将请求发送到代理服务器，代理服务器会将它们转发到${FunctionsDir}/deleteMessage 目的地。由于代理服务器不是基于浏览器的，因此不需要遵守 CORS。

【讨论】：