Question

Technologies:

javascript

Tolerim

23 days ago

How can I resolve CORS issues in Firebase Functions blocking my requests?

I am facing a CORS issue while attempting to deploy a HTTP API on Firebase functions. The request is getting blocked by Access-Control-Allow-Origin. I am attempting to resolve this by using Express, but have tried without it too without success. The error message that I am receiving is shown in this picture:

. When using Express, I have added CORS middleware to my API by setting the origin to a list of URLs, which includes my Firebase hosting URLs and other example URLs, and then I defined an endpoint route for my API. Here's an example of what I have done:


import cors from "cors";
import express from "express";

const app = express();
app.use(
    cors({
        origin: [
            "https://firebase-hosting-url.firebaseapp.com",
            "https://another-firebase-hosting-url.web.app",
            "https://example.com",
            "https://www.example.com",
            /\.example\.com$/,
        ],
    }),
);

app.post("/path", (req, res) => {
    //endpoint logic
});

exports.api = https.onRequest(app);

If I am not using Express, then I have added the CORS middleware using the same settings as above. Here's an example of what I have done:


import cors from "cors";
import express from "express";

exports.api = https.onRequest((req, res) => {
    const corsHandler = cors({
        origin: [
            "https://firebase-hosting-url.firebaseapp.com",
            "https://another-firebase-hosting-url.web.app",
            "https://example.com",
            "https://www.example.com",
            /\.example\.com$/,
        ],
    });

    corsHandler(req, res, () => {
        //endpoint logic
    });
});

On the client side, I am making a request through the Fetch API and passing the form data as JSON in the body. Here's an example of what I have done:


document.getElementById("form").addEventListener("submit", (event) => {
    event.preventDefault();

    fetch("https://firebase-functions-url.cloudfunctions.net/api/path", {
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        body: {
            //form data as json
        }
    })
        .then(res => res.json())
        .then(res => console.log(res))
        .catch(res => console.log(res));
})

Please let me know if you require any further assistance.

Answers(1)

Accepted Answer

The issue you are having is related to CORS (Cross-Origin Resource Sharing) and can occur when you try to make requests from one domain to another. In other words, your frontend code is running on one domain and you are trying to make a request to another domain. The backend in this case is Firebase Functions. To solve this issue, you need to allow CORS on the server that's serving the API. In your case, you're using Firebase Functions to serve your API. In your code, you are already setting up CORS using the cors package. The issue might be that you're setting the wrong origins for CORS in your code. You need to add the origins for all the domains from where you will be making the request. In your code, you can see that you have added the following domains as allowed origins in the cors function:

"https://another-firebase-hosting-url.web.app",
"https://example.com",
"https://www.example.com",
/\.example\.com$/

If you're making the request from a domain that is not on this list, it will not work. Make sure to add the domain from where you are running your frontend code. Also, make sure that you are calling the endpoint with the correct URL. In your code, you are calling the endpoint with the URL https://firebase-functions-url.cloudfunctions.net/api/path. Make sure that the URL is correct and matches the URL of your Firebase Functions deployment. Lastly, make sure that you are sending the correct Content-Type in your request. In your code, you are setting the Content-Type to application/json. Make sure that the server is also expecting this Content-Type and that your request body is formatted correctly as a JSON object.