即使我在服务器上设置了 Access-Control-Allow-Origin，Google Firebase 功能也会出现 CORS 错误答案

【问题标题】：CORS Error with Google Firebase Functions even though I've set Access-Control-Allow-Origin on server即使我在服务器上设置了 Access-Control-Allow-Origin，Google Firebase 功能也会出现 CORS 错误
【发布时间】：2020-03-06 04:52:51
【问题描述】：

当我在 localhost 上运行我的 react 应用程序时，我在浏览器上收到以下错误，该应用程序将有效负载发送到 Google Firebase 函数：

从源“http://localhost:3000”获取在“https://.cloudfunctions.net/”的访问权限已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我的 Google Firebase 函数有以下代码：

exports.<myfunction> = functions.https.onRequest(async (req, res) => {

  res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.set('Access-Control-Allow-Headers', '*');

  console.log(req.body); 

  res.end()
});

我在 Firebase 函数控制台日志中遇到的错误如下：

SyntaxError: Unexpected token # in JSON at position 0 在 JSON.parse() 在 createStrictSyntaxError (/worker/node_modules/body-parser/lib/types/json.js:157:10) 在解析（/worker/node_modules/body-parser/lib/types/json.js:83:15）在 /worker/node_modules/body-parser/lib/read.js:121:18 在 invokeCallback (/worker/node_modules/raw-body/index.js:224:16) 完成后（/worker/node_modules/raw-body/index.js:213:7）在 IncomingMessage.onEnd (/worker/node_modules/raw-body/index.js:273:7) 在 emitNone (events.js:111:20) 在 IncomingMessage.emit (events.js:208:7) 在 endReadableNT (_stream_readable.js:1064:12)

触发该功能的我的客户端代码如下：

submit(name) {

    fetch('https://< myproject >.cloudfunctions.net/< my function >', {method: 'POST', headers: {"Content-Type": "application/json", 
      },
      body: 'mytoken'
    }).then(result => {console.log(result)}); 
  }

此外，在几分钟和几天前一切正常！就好像这个错误开始突然冒出来一样。

【问题讨论】：

你在服务器端使用node？
@DonaldWu 我正在使用使用 Node 的 Google Firebase 函数
你使用express？您是否在节点中添加了cors lib？ github.com/expressjs/cors
@DonaldWu 据我所知，除非 firebase 函数以某种方式自动使用它，否则我不使用 express，但我不相信它会
您为什么不使用标准的 cors 模块？ stackoverflow.com/questions/42755131/…

标签： firebase cors google-cloud-functions

【解决方案1】：

您的 fetch 请求发送的 Content-Type 标头为 application/json，但正文为 'mytoken'，这不是有效的 JSON。尝试发送类似{"token":"mytoken"} 的内容。

编辑：此外，由于您正在设置 Content-Type 标头，因此您可能会触发 CORS 预检 OPTIONS 请求，并且可能希望使用 CORS middleware 来处理它。

编辑 2：错误的根源确实是发送的是纯字符串而不是 JSON 对象（由于内容类型设置为 application/json，因此需要 JSON 对象） .然而，还有一个额外的错误，即 JSON 有效负载需要被字符串化。因此，“body”的以下代码使一切顺利运行：

body: JSON.stringify({token: 'mytoken'})

【讨论】：

感谢您的关注！但是，仍然没有解决 CORS 问题
如果出现 JSON 解析错误，甚至无法访问您的代码。你的函数日志现在打印出什么？
我将正文改为正文：{'token':'mytoken'}。奇怪的是，我在服务器日志上收到两组响应：函数执行开始正文：{} 函数执行耗时 111 毫秒，以状态码结束：200 函数执行开始函数执行耗时 60 毫秒，以状态码结束：400 SyntaxError：JSON.pars 位置 1 处的 JSON 中的意外标记 o
由于您正在设置 Content-Type 标头，因此您可能会触发 CORS 预检。我建议使用上面有人建议的CORS middleware 来正确处理OPTIONS 请求。我认为这可能是您目前出现问题的原因。
现在可以使用 JSON 对象，但我需要在对象上使用 json.stringify()。