在 Firebase Cloud 功能中启用 Cors

Posted 2023-02-22

【中文标题】在 Firebase Cloud 功能中启用 Cors

【英文标题】：Enable Cors in Firebase Cloud Function

【发布时间】：2019-12-11 01:25:08

【问题描述】：

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

从源“http://localhost:4200”访问“xxxxxxxxxxxxxxxxxxxxxxxx”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：不存在“Access-Control-Allow-Origin”标头请求的资源。

我知道我必须在我的云功能中启用 cors，但我以前从未这样做过，所以如果你们能告诉我该怎么做，那就太好了？ 我确实检查了this 线程，但我有点困惑我需要在哪里初始化 cors，我是否也需要安装它的依赖项以及我需要在我的云功能中在哪里启用它？这是我的云功能

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"
        )
    
);

【参考方案1】：

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

使用外部库处理OPTIONS调用

cors

手动处理OPTIONS调用

从headers获取请求方法

检查方法是否为OPTIONS

使用200 状态码解析 API。

 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"
            )
        

    );

【讨论】：

你能编辑我的云功能吗，因为正如我所说，我不确定我需要在哪里编辑我的代码

我已将部分代码添加到您的云功能中。一旦检查并让我知道是否有任何错误，因为我没有测试它。

从生产 url 发送请求时我们是否需要删除它？

如果您的客户端应用程序和服务器应用程序在不同的域中运行，

@DamienRomito 浏览器将调用OPTIONS。如果您要在同一个域中托管客户端和服务器应用程序，则无需处理 OPTIONS 调用，因为浏览器本身不会进行调用

【参考方案2】：

在服务器端试试这个： npm install cors。 然后 const cors = require('cors')(origin: true); 也许这个链接会帮助你：Enabling CORS in Cloud Functions for Firebase 您还可以使用插件在浏览器中禁用 CORS 规则，例如在 crome 中：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en