在本地主机上运行时出现 CORS 的 Firebase 错误答案

【问题标题】：Firebase error with CORS when running on localhost在本地主机上运行时出现 CORS 的 Firebase 错误
【发布时间】：2018-10-16 16:18:05
【问题描述】：

运行我的项目时出现以下错误。

加载失败 https://us-centralx-xxx.cloudfunctions.net/xxx: 对预检请求的响应未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:3000” 使用权。响应的 HTTP 状态代码为 500。

在阅读了很多SO帖子后，我找到了以下解决方案，我需要在其中添加Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers

const HEADERS = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin':  'http://localhost:3000/',
    'Access-Control-Allow-Methods': 'POST',
    'Access-Control-Allow-Headers': 'X-Requested-With,content-type'
};

但是，错误仍然存在。我该如何解决这个问题？

更新

exports.uploadFile = functions.https.onRequest((req, res) => {
        res.setHeader("Access-Control-Allow-Origin", "*");

        res.setHeader('Access-Control-Allow-Methods', 'GET,POST,DELETE,HEAD,PUT,OPTIONS');
        res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');


    res.status(200).json({
        message: req.body
    });
});

【问题讨论】：

这个问题与后端服务器有关，当您发送飞行前请求时，服务器应该允许带有标头的请求和响应。在您的 nodejs 标头中，您需要允许 http://localhost:3000 orgin 获得访问权限。
这个 CORS 错误非常具有误导性。当客户端错误地将函数调用到该函数甚至不存在的不同区域时，我遇到了这个问题。一旦客户端指向正确的区域，就不会再出现 CORS 问题。我们不必按照您的问题和其他答案的建议对任何 res.setHeader() 进行编码。

标签： node.js reactjs firebase

【解决方案1】：

当我意识到我没有将该功能部署到 Firebase 时，我遇到了这个问题并遇到了同样的错误。部署它停止了错误。太傻了，但犯同样的错误并不难。

【讨论】：

【解决方案2】：

在您的 Node.js 服务器中设置适当的标头以允许受控的 CORS 请求：

app.use((req, res, next) => {
  const origin = req.headers.origin;
  // arrayOfValidOrigins is an array of all the URL from where you want to allow 
  // to accept requests. In your case: ['http://localhost:3000'].
  // In case you want to accept requests from everywhere, set:
  // res.setHeader('Access-Control-Allow-Origin', '*');
  if (arrayOfValidOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }

  // Here allow all the HTTP methods you want
  res.header('Access-Control-Allow-Methods', 'GET,POST,DELETE,HEAD,PUT,OPTIONS');
  // Here you allow the headers for the HTTP requests to your server
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  // Method to reference to the next Node.js function in your flow
  next();
});

您的另一个选择是使用Express.js CORS package 并根据您的需要对其进行配置。

【讨论】：

我仍然遇到同样的错误。我已经用我拥有的代码更新了我的帖子。你能看看吗。
我不明白你为什么要在一个名为 uploadFile 的函数的导出中设置所有 CORS 指令，但如果你试图在每个路由端点手动完成，你会浪费很多时间。我建议您在设置路由之前将 CORS 指令设置为您的 Node HTTP 服务器/应用程序，以便正常工作。

【解决方案3】：

import * as cors from 'cors'

const corsHandler = cors({origin: true})

export const myFunc = functions.https.onRequest(async (req: Request, res: Response) => {
   corsHandler(req, res, () => {
     // Do your work here
   })
)

【讨论】：

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。