CORS Problem - Chrome and Authentication

Hey, we added CORS to our project a few weeks ago to get a running deployment on AWS. That worked fine, but since then we have had problems with dbAuth and the Chrome browser locally. We followed the tutorial in the docs (Cross-Origin Resource Sharing | RedwoodJS Docs) until the topic “Serving Sides to the Internet”.

Our problem is that the site loads locally in Chrome.

But when you want to log in, it only shows the toast “Welcome Back” but no redirection.
There is no error in the terminal:
grafik

Is there anybody else who got the same problems (we couldn’t login) in Chrome?
Everything is fine in Firefox.

Hmm, never seen that notAcknowledged message before. @dthyresson any idea what that message means?

I build everything testing in Chrome so it’s really strange that it wouldn’t work here!

You said you added CORS a few weeks ago—was it working locally then and only recently broke? Or did you just add dbAuth and it’s never worked locally?

Could you try stripping out the CORS settings locally and see if that works? You shouldn’t need any CORS config for local dev, and in fact getting it working locally is a real pain. You should probably avoid it if at all possible in your deployment environments: setup a proxy to make the api and web sides appear to be served from the same domain.

Thanks for your response :slight_smile:
The notAcknowledged message is a custom sql query for our notification center.

Locally was everything fine. I worked a lot in Firefox, so I didn’t notice any problems. But my colleague worked normally in Chrome and couldn’t log in locally after adding CORS.
We had to implement CORS, because we are using AWS and API and Web in different places.

We will try out your suggested tips :slight_smile:

Hello @joriswill

I did, in the past, handle a requirement to have Cors work in dev by firing up a Heroku node running cors-anywhere as talked about here: The ultimate guide to enabling Cross-Origin Resource Sharing (CORS) - LogRocket Blog

  • Redwood Rules !

Al;

It sounds to me like that you configured CORS in the the graphql handler, but not the auth function (in api/src/functions/auth.ts) - its covered in the second section of those docs.

There’s probably a lot of scarily complicated solutions for CORS, that in my opinion are totally unnecessary. The best option is to create a URL rewrite - that just forwards requests from your web side’s hostname to the api one. Not only is this easier, its also faster because your browser won’t make all those unnecessary preflight requests.

e.g.
https://web.myredwoodapp.com/api/https://api.myredwoodapp.com/api/

That way you won’t even have to deal with CORS.

1 Like