CORS 阻止访问资源：如何在 Firebase 云功能中修复？

Posted 2023-03-04

【中文标题】CORS 阻止访问资源：如何在 Firebase 云功能中修复？

【英文标题】：CORS blocking access to resource: How to fix in firebase cloud function?

【发布时间】：2021-11-22 09:03:49

【问题描述】：

是的，我有可怕的 CORS 问题（或者，至少看起来如此）....我已经搜索并尝试了一些解决方案，但无济于事...

我使用 firebase 模拟器并在本地运行我的函数没有问题，但是当我部署该函数并尝试在本地主机客户端应用程序上使用 fetch() 发送 POST 请求时，我收到以下 CORs 浏览器控制台错误（它甚至不会访问服务器日志）：

Access to fetch at 'https://us-central1-XXXX.cloudfunctions.net/deleteAsset' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The FetchEvent for "https://us-central1-XXXXX.cloudfunctions.net/deleteAsset" resulted in a network error response: the promise was rejected.

Promise.then (async)
(anonymous) @ firebase-auth-sw.js:77
firebase-auth-sw.js:77 
        
 Uncaught (in promise) TypeError: Failed to fetch
    at firebase-auth-sw.js:77

这是我的客户端获取请求：

UploadImage.vue:

async deleteFile() 
      await fetch(
        'https://us-central1-XXXX.cloudfunctions.net/deleteAsset',
        
          method: 'POST',
          headers: 
            'Content-Type': 'application/json'
          ,
          body: JSON.stringify(
            public_id: this.imageSrc.public_id
          )
        
      )

然后我的firebase云功能是这样的：

/deleteAsset.js:

import cloudinary from 'cloudinary'
import * as functions from 'firebase-functions'

const cors = require('cors')( origin: true )

cloudinary.config(
  cloud_name: functions.config().cloudinary.cloud_name,
  api_key: functions.config().cloudinary.api_key,
  api_secret: functions.config().cloudinary.api_secret,
  secure: true
)


export const deleteAsset = functions.https.onRequest((req, res) => 
  return cors(req, res, () => 
    try 
      functions.logger.log(req.body)
      cloudinary.v2.uploader.destroy(
        req.body.public_id,
        
          invalidate: true
        ,
        (error, result) => 
          if (error) 
            res.status(500).send(error)
          

          res.status(200).send(result)
        
      )
     catch (error) 
      res.status(500).send('There was an error in deleteAsset function')
    
  )
)

有人发现任何问题或对如何进一步解决此问题有任何建议吗？

【参考方案1】：

在您的 cors 选项中，您没有将 localhost 设置为有效来源。

从这里更改代码

export const deleteAsset = functions.https.onRequest((req, res) => 
  return cors(req, res, () => 
    try 

到这里

export const deleteAsset = functions.https.onRequest((req, res) => 
  return cors(origin: 'http://localhost:3000', req, res, () => 
    try 

您应该添加您将使用的所有来源，而不仅仅是 localhost。有关如何指定允许的来源的更多详细信息，请查看documentation。

【讨论】：

谢谢！正在调查...

不幸的是，仍然遇到 CORS 问题。我需要从顶部删除 const cors = require('cors')( origin: true ) 吗？

不用去掉，把origin:true改成origin:'localhost:3000'就够了

还是没有运气。不管怎么说，多谢拉！我会尝试部署到远程服务器，看看是否有帮助

真的很奇怪。同样的问题。

【参考方案2】：

好的，所以我修复了它....CORS 问题是由于云功能没有正确的 IAM 权限。我在查看我的仪表板后怀疑它（未在 firebase 控制台上显示，必须去 Google Cloud 上的 Cloud Functions 才能看到它！）并注意到它缺少“允许未经身份验证”。因此，我手动删除了该功能并重新部署。现在一切都好！

【讨论】：

由于您能够解决最初的问题，能否请将答案标记为已接受，这将有助于社区将其识别为解决方案。谢谢

我会的，但是直到过了几天才让我选择答案。

好的，别担心，等几天看看他们是否会让你标记为已接受。