Home > database >  Cloud Run CORS issue despite enabling cors in the code
Cloud Run CORS issue despite enabling cors in the code

Time:11-13

I'm struggling with understanding why I'm having CORS issues with my Cloud Run function.

It's a pretty standard nodejs express app, using the CORS middleware:

import dotenv from 'dotenv';
import cors from 'cors';
import express from 'express';
import pass from 'passport';
import sessionLoader from './loaders/session.loader';
import passportLoader from './loaders/passport.loader';
import routes from './routes/routes';
import listEndpoints from 'express-list-endpoints'
dotenv.config();
const app = express();
...
app.listen(process.env.PORT);
const corsOptions = {
  origin: [process.env.FRONTEND_URL],
  credentials: true,
};
app.use(cors(corsOptions));
...
export default app;

When I ran the app locally using Vue and Express, I used to define the FRONTEND_URL as the http://localhost:4000, yet now I get these errors:

Access to XMLHttpRequest at 'https://cloud-run-function.run.app/auth/login' from origin 'https://firebase-frontend.web.app' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The frontend is hosted on Firebase hosting.

I know the backend works because I can reach it using Postman.

Am I missing something? Should I add additional configuration to my corsObject and/or firebase deployments?

TIA!

EDIT:

  • Ingress-wise: It allows all traffic.
  • Authentication-wise: It doesn't require any.

EDIT 2:

Thanks to @MartinOrmander's answer, I decided to go with rerouting from Firebase hosting using rewrites. The thing is that the rewrite prefix seems to be conserved when sent to the cloud run...

EDIT 3:

The rewriting didn't fit my needs, so I'm back to solving the CORS issue. Per Martin's tips, I've decided to check the headers.

I ran the app locally and compared it with the remote service:

Local Cloud Run

And for those who are concerned that the FRONTEND_URL isn't set: enter image description here

CodePudding user response:

EDIT: OP responded that they have not set their Cloud Run service to "require authentication". While my reply below does not resolve their particular problem, I'm leaving it up as it will help others who got the same error message that OP got, but who did require authentication.


Has your Cloud Run service has been set to "require authentication"? If so, please read on.

When your browser detects that it is sending an AJAX request to another domain name, it will first send a CORS preflight OPTION request without any authentication. If your Cloud Run service has been set to "require authentication", it won't respond to that request.

You have a few options:

  • Make your Cloud Run service accessible to allUsers and validate the incoming requests in your Cloud Run code.

  • Eliminate CORS completely by serving your web pages and your API from the same domain. You can ask Firebase Hosting to forward requests coming in to you domain name to a Cloud Run service: https://firebase.google.com/docs/hosting/cloud-run

CodePudding user response:

You hit app.listen(...) before using app.use(cors(...)).

Switch between them - app.listen should be your last line in the file.

Also, there's no need to export the app object, as app.listen enters a never-ending loop listening to incoming traffic, so export default app will never be reached.

  • Related