CORS 阻止对资源的访问：如何修复 firebase 云功能？

Question

是的，我遇到了可怕的 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')
    }
  })
})

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

Answer 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 {

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

Answer 2

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

CORS 阻止对资源的访问：如何修复 firebase 云功能？

CORS blocking access to resource: How to fix in firebase cloud function?

node.js

cors

firebase

fetch-api

google-cloud-functions