How can I bypass CORS to make a call to Firestore from Blazor WebAssembly? (call is in in JavaScript)

Question

I am building a simple login page using Blazor WebAssembly and utilizing JSInterop to write JS functions in order to work with Firebase/Firestore. I have a function that signs the user in through a simple custom form using Firebase methods, then grabs the id token and user id to then pass into another function that requests access to Firestore. Everything works perfectly through Postman, but when I run through this process in my app, I am blocked by a CORS error:

Access to fetch at 'https://firestore.googleapis.com/v1/projects/trailblazor-
5ba6f/databases/(default)/documents/users/JJNlKtvGMcUm7MjfkuJy6WdlMiO2' from origin 
'https://localhost:44318' has been blocked by CORS policy: Response to preflight request doesn't pass
access control check: It does not have HTTP ok status.

Here is my code for the request to access user data in Firestore (passing in the id token and user id):

async function sendToken(idToken, userId) {
    try {
        const response = await fetch(`https://firestore.googleapis.com/v1/projects/trailblazor-5ba6f/databases/(default)/documents/users/${userId}`, {
            headers: new Headers({
                'x-api-key': '**omitted for security**',
                'Authorization': 'Bearer ' + idToken,
                'Access-Control-Allow-Origin': 'https://localhost:44318',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Content-Type': 'application/json'
            }),
            mode: 'cors'
        });
        const receivedResponse = await response.json();
        if (receivedResponse != null) {
            console.log(receivedResponse);
        }
    } catch (error) {
        return error.message;
    }
}

As you can see, I've tried loads of headers and nothing has worked so far. Even the CORS-enabling Chrome extension I have enabled is not helping. I have thought about making a proxy server, but I'm not sure if that makes sense quite yet. I've reviewed the Firebase docs and this should be how I can access Firestore, and like I said, everything works flawlessly in Postman (of course).

score 0 · Accepted Answer · answered Apr 06 '21 at 05:37

Firstly, CORS is managed by the server. The fact that you add some header in your request doesn't help. It the server who, based on the domain of incoming requests, sets appropriate headers if CORS requests are allowed.

You're right about making a proxy server. You can use https://cors-anywhere.herokuapp.com/corsdemo, which is a proxy server for frontend developers to make CORS requests. The github page is here

How can I bypass CORS to make a call to Firestore from Blazor WebAssembly? (call is in in JavaScript)

1 Answers1