CORS error: No 'Access-Control-Allow-Origin' header present

Question

I'm encountering a CORS (Cross-Origin Resource Sharing) issue while making an XMLHttpRequest from my web application. The error message I'm receiving is as follows:

Access to XMLHttpRequest at 'https://blablabla.ue.gateway.dev/customers/?platform=android' from origin 'https://blablabla-customer.web.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I understand that this error occurs when the server does not include the appropriate 'Access-Control-Allow-Origin' header in its response. However, I'm unsure how to resolve this issue.

I'm using XMLHttpRequest to make a request to the specified URL, and my web application is hosted at 'https://blablabla-customer.web.app'. The API endpoint I'm trying to access is hosted on the 'https://blablabla.ue.gateway.dev' domain.

I'm looking for guidance on how to properly handle CORS and resolve this error. Any suggestions or solutions would be greatly appreciated. Thank you!

I have already tried adding the necessary headers on my client-side code, such as 'Access-Control-Allow-Origin', but the error persists.

I have already tried adding this code:

    const express = require('express');
    const cors = require("cors");
    const app = express();
    const corsOptions = {
        origin: "*",
    }
    app.use(cors(corsOptions))

But still get the same error. By the way I'm using nodeJS Typescript and using Google Cloud Platform and also use Api Gateway from Google Cloud Platform

Answer 1

You should check the accepted answer to this post. Since it addresses the CORS error: No 'Access-Control-Allow-Origin' header. If the accepted answer is not applicable to your case, there are other answers there that may resolve your issue. Hope this helps!