使用本地模擬器測試 Firebase Cloud Functions 時“跨源請求被阻止”

Question

I'm getting the following CORS error when trying to invoke my callable function locally using the firebase cloud function emulator with my react app:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-central1-xxxx-xxxxx.cloudfunctions.net/getSignedUrls. (Reason: CORS header 'Access-Control-Allow-Origin' missing). Status code: 302.

這是我的雲 function：

/functions/index.js

const functions = require('firebase-functions')
const AWS = require('aws-sdk')
const fs = require('fs')
const path = require('path')
const admin = require('firebase-admin')

admin.initializeApp()

exports.getSignedUrls = functions.https.onCall((data, context) => {
    const cloudfrontAccessKeyId = "XXXXXXXXX"
    let cloudfrontPrivateKey = fs.readFileSync(path.join(__dirname, 'private_key.pem'))
    const signer = new AWS.CloudFront.Signer(cloudfrontAccessKeyId, cloudfrontPrivateKey)
    const distName = "xxxxxxxxx.cloudfront.net"
    const s3Path = data.path 
    let cfObjectUrl = 'https://' + distName + '/' + s3Path
    const twoDays = 2*24*60*60*1000
    const signedUrl = signer.getSignedUrl({
    url: cfObjectUrl,
    expires: Math.floor((Date.now() + twoDays)/1000)
    })
    return {url: signedUrl}
})

這是我創建對我的應用程序雲功能的引用的地方：

/src/firebase.js

import firebase from 'firebase/compat/app'
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database"
import {getFunctions} from 'firebase/functions'

const app = firebase.initializeApp({
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",

  authDomain: "xxxx-xxxx.firebaseapp.com",

  databaseURL: "https://xxx-xxxx-default-rtdb.firebaseio.com",

  projectId: "xxxx-xxxx",

  storageBucket: "xxxx-xxxx.appspot.com",

  messagingSenderId: "xxxxxxxxxxx",

  appId: "1:938967916081:web:xxxxxxxxxxxxxxxxxxx",

  measurementId: "G-xxxxxxxx"

})

export const auth = getAuth(app)
export const db = getDatabase(app)
export const functions = getFunctions(app)

export default app

這是我試圖在其中調用我的雲 function 的組件：

/src/components/SignedUrlTest.js

import React, { Component } from 'react';
import {httpsCallable} from 'firebase/functions'
import {functions} from '../firebase'

class SignedUrlTest extends Component {
    constructor(props){
        super(props)
        this.state = { url: null}
        this.getUrl = this.getUrl.bind(this)
    }

    getUrl(){
        var getSignedUrls = httpsCallable(functions, 'getSignedUrls');
        getSignedUrls({path: "Melissa-OShaughnessy-6-1024x683.jpg"
        }).then((result) => { console.log(result.data) })
        .catch((error) => {
            console.log(error)
        })
    }

    render() {
        return (
            <div>
                <button onClick={this.getUrl}>geturl</button>
            </div>
        );
    }
}

export default SignedUrlTest;

我已經翻閱了文檔（ https://firebase.google.com/docs/functions/callable ），但似乎無法弄清楚為什么我無法使用客戶端 function 我在同一環境中測試了本地模擬的“onRequest”雲 function，並且能夠使用我的 web 瀏覽器獲得適當的響應，但我無法弄清楚如何從我的應用程序調用“onCall”ZC1C424268E17A948DZ。 任何幫助將不勝感激：）

Answer 1

您是否嘗試過此線程中提到的解決方案：

在 Cloud Functions 中為 Firebase 啟用 CORS

特別是一個，轉到 GCP 控制台並將雲 function 調用程序設置設置為“allUsers”。