Cors error
Hello, I keep getting a cors error when trying to logout in my application. Im using nextjs on the frontend, and have a different express backend. I'm pretty new, and cant really tell whether it's coming from the backend or the frontend
Frontend: localhost:3000
Backend: localhost:3030
Error:
On the express backend, I have set up cors options like this:
And this is the logout function from the backend:
Does anyone know how to fix the error?
16 Replies
Hi! I've recently had to deal with plenty of CORS errors cuz of the back-end and front-end not sharing the same domain and what i came to learn was that CORS errors actually contain pretty useful info on how to fix them. By this i mean most of the time it complains about missing or misconfigured headers so what you can do is try to access the backend from the browser to see what headers actually get set.
Then if you see the 'Access-Control-Allow-Origin' is actually missing (even tho its weird cuz it shouldn't be cuz im using the same exact cors setup) , you can try out different things in express like trying to set the headers manually using res.setHeader(<header_name>, <header_value>)
Also make sure you're actually hitting the express endpoint and that the front-end isn't getting a 404 from it instead
I think its coming from the front-end. thats a new one for me :))
wait so if you go to localhost:3000 it works okay but when you logout and get redirected you get that error? im trying to figure out what things you could tweak
i honestly have no idea. Everything else works, so i think it's the redirect back to the frontend
could you try to do the redirect in the front-end instead? that would tell you if this is a front-end issue
like when clicking the logout button, instead of making a request to the backend, you can do window.location.href = '/'
and if the same thing happens then the bug is somewhere in the frontend
Well that works without sending any errors, but does that even trigger cors at all? Is cors not only when sending requests between different domains?
i had some issues with redirects between multiple domains and CORS too so what i ended up doing is letting the front-end decide how to handle the response from the back-end. you could use res.json({redirect: '/'}) instead of calling the redirect on the back-end
and in the front-end you can check if res.data.redirect is defined (or however you access response data from your back-end)
i like this approach more because you can also show an error label somewhere if you get something unexpected from the backend
That seems kinda like a security risk
are you using http only cookies for storing the auth session?
Yes?
i was asking because the way i handle security in my app is any time the user goes to a protected page like their profile for example, i always check with the back-end if they're logged in anyway
and depending on the response from that the front-end either allows the user to stay on the page or its redirecting them to the login page
so the reason thats not a security problem is the redirect the front-end does is like an user going straight to your protected path
and you still need to validate if they have access anyway
let me know if i dont make sense cuz idk how well im explaining this lol :))
and even if i wouldn't make this check, user data would still be safe because without a session id cookie the back-end would return an error cuz of the user not being logged in
Okay, but I would still like to fix the cors error. The redirect should be possible right?
i just did a quick google search and apparently redirects with cors is funky
Stack Overflow
How to solve CORS redirection with express js router?
I'm trying to implement OAuth2 authentication. When I try to send Authorization code I get this error:
XMLHttpRequest cannot load link1.
Redirect from link1 to link2
has been blocked by CORS
got that from comments of the answer and from my own experience with it
normally yeah but probably not when multiple domains are involved
because before i switched to serverless and used a more conventional node server on heroku i could do redirects with no problem
but i may be wrong because i havent spent that much time trying to figure out a fix since the method i described to you was alright for my use-case
Well everywhere i have looked they use the wildcard, but i can't really do that, when needing credentials
yeah it really is a nightmare :)). i probably spent like half a week debugging CORS and cookie related stuff
it would've been way simpler if both the front-end and back-end were on the same domain
so im not actually that familiar with nextjs but i think they give you a way to have your back-end on the same domain as the front-end
and that would probably make things way easier for you but idk if that works for your use-case
i really wish i could've been more helpful to fix your problem without removing .redirect on the backend