Firebase云函数CORS错误与403权限问题咨询

Let's break down and fix your two issues step by step—they’re rooted in different problems, so we’ll tackle each one separately.

1. Resolving the CORS Error #

First, I spotted a simple but critical typo in your cloud function code that’s likely causing the CORS header to not be sent properly:

Your current code uses res.status(200) inside the CORS callback, but your function parameters are named request, response—res is undefined here! This throws an error before the CORS middleware can finish setting the required headers, which leads to the browser’s CORS block.

Fix the Variable Name Typo #

Update your cloud function code to use the correct parameter name:

const functions = require('firebase-functions');
const cors = require('cors')({ origin: true });
exports.helloWorld = functions.https.onRequest((request, response) => {
  cors(request, response, () => {
    // Changed "res" to "response" here
    response.status(200).send("Hello from Firebase!");
  });
});

After making this change, redeploy your cloud function with firebase deploy --only functions. This should resolve the CORS error if that was the root cause.

2. Fixing the 403 Forbidden Error #

Even when CORS is working, the 403 error means your client doesn’t have permission to access the function. Here are the most common fixes:

Check Cloud Function IAM Permissions #

By default, Firebase HTTP cloud functions restrict access to project members only. To allow external users (or authenticated users) to call it:

• Open the Firebase Console → Your Project → Functions → Select your helloWorld function → Click the Permissions tab
• Add a new member:
  • If you want to allow all users (including unauthenticated), enter allUsers
  • If you only want authenticated users, enter allAuthenticatedUsers
• Assign the Cloud Functions Invoker role to this member
• Save the changes and wait a minute for permissions to propagate

Ensure Authenticated Requests Include the ID Token #

You mentioned you’ve completed user authentication, but your axios call isn’t sending the user’s ID token to the cloud function. If your function requires authentication (or if you set permissions to only allow authenticated users), you need to include the token in the request headers:

import { getAuth, getIdToken } from "firebase/auth";

// Get the current authenticated user's ID token
const auth = getAuth();
const currentUser = auth.currentUser;

if (currentUser) {
  getIdToken(currentUser)
    .then(idToken => {
      axios
        .get(
          "https://us-central1-dev-imcla.cloudfunctions.net/helloWorld",
          {
            headers: {
              'Authorization': `Bearer ${idToken}`
            }
          }
        )
        .then((res) => {
          console.log(res);
        })
        .catch(er => {
          console.log(er);
        });
    })
    .catch(tokenErr => {
      console.log("Failed to get ID token:", tokenErr);
    });
} else {
  console.log("No authenticated user found.");
}

Verify No Extra Authentication Checks in the Function #

Double-check if you added any custom authentication logic in your cloud function that might be blocking the request. For example, if you’re trying to verify the ID token but haven’t implemented it correctly, that could also throw a 403.

内容的提问来源于stack exchange，提问作者Giannis Savvidis