Question

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

通过CORS策略阻止从来源“ http://localhost:3000”访问“ https：// .cloudfunctions.net / ”的访问：没有“ 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：JSON中位置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_visible.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)}); 
  }

此外，几分钟前和几天前，一切工作正常！好像此错误开始突然出现。

Answer 1

您的获取请求正在发送application/json的Content-Type标头，但正文为'mytoken'，这是无效的JSON。尝试发送类似{"token":"mytoken"}之类的东西。

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

编辑2：错误的根源确实是事实，即发送的是纯字符串而不是JSON对象（由于content-type设置为application / json，因此需要JSON对象）。但是，还有一个后遗症，那就是需要对JSON有效负载进行字符串化处理。因此，以下“ body”代码使一切成功运行：

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

即使我已经在服务器上设置了Access-Control-Allow-Origin，Google Firebase Functions也会出现CORS错误

1 个答案: