在 Firebase 云函数中启用 Cors

本文介绍了在 Firebase 云函数中启用 Cors的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我已经编写了一些云函数并部署了它们，现在我正在尝试使用我的 Angular 应用程序访问这些 API，但出现此错误

I have written some cloud functions and deployed them now i am trying to hit those APIs using my Angular application but i am getting this error

从源 'localhost:4200' 访问位于 'xxxxxxxxxxxxxxxxxxxxxxxx' 的 XMLHttpRequest 已被 CORS 政策阻止:对预检请求的响应未通过访问控制检查:请求的资源上不存在Access-Control-Allow-Origin"标头.

Access to XMLHttpRequest at 'xxxxxxxxxxxxxxxxxxxxxxxx' from origin 'localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我知道我必须在我的云功能中启用 cors，但我以前从未这样做过，所以如果你们能告诉我如何做到这一点会很棒吗?我确实检查了这个线程，但我有点困惑我在哪里需要初始化 cors，我是否也需要安装它的依赖项，我需要在云功能中的哪里启用它?这是我的云功能

I know i have to enable cors in my cloud function but i have never done that before so would be awesome if you guys could tell me how to do that? I did checked this thread but i am a little bit confused as to where i need to initialize the cors and do i need to install its dependency too and where do i need to enable it in my cloud function? Here is my cloud function

const functions = require('firebase-functions'); const admin = require("firebase-admin"); const bodyParser = require("body-parser"); admin.initializeApp(); const db = admin.firestore(); const usersCollection = db.collection("users"); exports.addUser = functions.https.onRequest((req, res) => { if (req.body.username != null && req.body.firstname != null && req.body.lastname != null && req.body.addr1 != null && req.body.addr2 != null || req.body.username != undefined && req.body.firstname != undefined && req.body.lastname != undefined && req.body.addr1 != undefined && req.body.addr2 != undefined ) { let docId = Math.floor(Math.random() * (99999 - 00000)); let newUser = { "username": req.body.name, "firstname": req.body.firstname, "lastname": req.body.lastname, "addr1": req.body.addr1, "addr2": req.body.addr2, } usersCollection.add(newUser).then(snapshot => { res.send(200, { "message": "User was successfully created" }) }); } else { res.send(400, { "message": "All fields are required" }) } });

推荐答案

有两种方法可以解决这个问题

There are two ways to solve this

使用外部库处理OPTIONS调用

cors

手动处理OPTIONS调用

从headers获取请求方法

检查方法是否为OPTIONS

使用 200 状态代码解析 API.

Resolve the API with 200 status code.

exports.addUser = functions.https.onRequest((req, res) => { res.set('Access-Control-Allow-Origin', '*'); res.set('Access-Control-Allow-Methods', 'GET, PUT, POST, OPTIONS'); res.set('Access-Control-Allow-Headers', '*'); if (req.method === 'OPTIONS') { res.end(); } else{ if (req.body.username != null && req.body.firstname != null && req.body.lastname != null && req.body.addr1 != null && req.body.addr2 != null || req.body.username != undefined && req.body.firstname != undefined && req.body.lastname != undefined && req.body.addr1 != undefined && req.body.addr2 != undefined ) { let docId = Math.floor(Math.random() * (99999 - 00000)); let newUser = { "username": req.body.name, "firstname": req.body.firstname, "lastname": req.body.lastname, "addr1": req.body.addr1, "addr2": req.body.addr2, } usersCollection.add(newUser).then(snapshot => { res.send(200, { "message": "User was successfully created" }) }); } else { res.send(400, { "message": "All fields are required" }) } } });