How to enable cors in firebase functions

Question

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const inventory_functions = require("firebase-functions");
const inventory_admin = require("firebase-admin");
import * as cors from "cors";
const corsHandler = cors({ origin: true });

exports.getByLocation = inventory_functions.https.onRequest(
  (request, response) => {
    corsHandler(request, response, async () => {
      const inventory = await inventory_admin
        .firestore()
        .collection("inventory")
        .get();
      response.status(200).send(JSON.stringify(inventory));
    });
  }
);

Here is how i am trying to access from client:

const res = await fetch(
    "https://us-central1-surplus-functions.cloudfunctions.net/inventory-getByLocation"
  );
  if (!res.ok) throw new Error(res.statusText);
  return res.json();

Here is error:

Access to fetch at 'https://[project id].cloudfunctions.net/inventory-getByLocation' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.

I verified i am not seeing response headers in postman that i expect even though i am setting them in the above code so confused on why that is.

I now have a working solution:

const authentication_cors = require("cors")({
  origin: true,
});

exports.register = authentication_functions.https.onRequest(
  async (request: any, response: any) => {
  return authentication_cors(request, response, async () => {
    const data = JSON.parse(request.body);
    const resp = await AuthenticationBO.Register(
      authentication_admin,
      data.Profile.Email,
      data.Vendor,
      data.Profile,
      data.Vendor?.Name
    );
    response.send(resp);
  });
});

Answer 1

You can use the documentation that @Paul Huynh referenced but making a small adaptation to use it within Firebase Functions:

exports.getByLocation = inventory_functions.https.onRequest((req, res) => {
  // Set CORS headers for preflight requests
  // Allows GETs from any origin with the Content-Type header
  // and caches preflight response for 3600s

  res.set('Access-Control-Allow-Origin', '*');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  } else {
    // Do whatever your function has to do
    const inventory = await inventory_admin
      .firestore()
      .collection("inventory")
      .get();
    response.status(200).send(JSON.stringify(inventory));
  }
};

If you are willing to implement express, you could enable CORS in a more elegant manner by following this docs

Answer 2

I encountered this just yesterday. There is a section in the Google Cloud Functions documentation about this. Here's how they've done it. I've used this code successfully too. You can set the Allow-Origin to *

exports.corsEnabledFunctionAuth = (req, res) => {
  // Set CORS headers for preflight requests
  // Allows GETs from origin https://example.com with Authorization header

  res.set('Access-Control-Allow-Origin', 'https://example.com');
  res.set('Access-Control-Allow-Credentials', 'true');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Authorization');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  } else {
    res.send('Hello World!');
  }
};