云功能和 Firebase 的客户端 CORS 错误

Posted

技术标签:

【中文标题】云功能和 Firebase 的客户端 CORS 错误【英文标题】:Client side CORS error with cloud functions and Firebase 【发布时间】:2020-01-22 08:11:18 【问题描述】:

我是 firebase 新手,想使用他们的 HTTP 云功能。当我尝试转到任何端点(不使用模拟器 - 例如https://us-central1-xxxxxxxx.cloudfunctions.net/app/api/admin/studio)时,我遇到了 CORS 错误。

这是我的代码示例。我目前没有设置安全规则(仍在开发中)。下面的代码在使用 firebase 模拟器时完美运行。只是不使用“实时” .cloudfunctions 链接。

是否有我缺少的权限或设置?如果您通过浏览器或 POSTMAN 直接访问此端点,则此端点有效,而不是从 react 应用程序访问。

反应应用程序的错误示例是:

Origin https://xxxxxxxxxxx is not allowed by Access-Control-Allow-Origin.
Fetch API cannot load https://us-central1-xxxxxxxx.cloudfunctions.net/app/api/admin/studio due to access control checks.

index.js

const functions = require("firebase-functions")
const express = require("express")
const app = express()
const cors = require("cors")( origin: true )
app.use(cors)
const studio = require("./http/studio.js")
app.post("/api/admin/studio", studio.add)
exports.app = functions.https.onRequest(app)

db.js

const admin = require("firebase-admin")
admin.initializeApp()
module.exports = admin.firestore()

http/studio.js

const db = require("../db")
const error = require("./error")
exports.add = (req, res) => 
const  data  = req.body

if (!data) 
return error.no_data(res)


return db
.collection("data")
.doc("studio")
.update( values: admin.firestore.FieldValue.arrayUnion(data) )
.then(res.status(200).send("Data updated successfully"))
.catch(err => error.updating(res, err))

【问题讨论】:

【参考方案1】:

我能够通过更新我的 index.js 代码以包含允许的来源列表来修复。

const functions = require("firebase-functions")
const express = require("express")
const app = express()
const cors = require("cors")( origin: true )


var allowedOrigins = ["https://domainone", "https://domaintwo"]
app.use(
  cors(
    origin: function(origin, callback) 
      if (!origin) return callback(null, true)
      if (allowedOrigins.indexOf(origin) === -1) 
        var msg = "The CORS policy for this site does not " + "allow access from the specified Origin."
        return callback(new Error(msg), false)
      
      return callback(null, true)
    
  )
)

const studio = require("./http/studio.js")
app.post("/api/admin/studio", studio.add)
exports.app = functions.https.onRequest(app)

【讨论】:

以上是关于云功能和 Firebase 的客户端 CORS 错误的主要内容,如果未能解决你的问题,请参考以下文章

Cloud Functions for Firebase 在 CORS 预检请求上触发功能

为 Firebase 云功能启用 Cors

Firebase 云功能:带有 CORS 阻止的总线男孩的 POST 方法

Firebase 云功能中的 CORS 块

未为 Firebase 云功能启用 Cors

Cors - Firebase 云功能中的访问控制允许来源错误