Theo's Typesafe Cult•2y ago

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:

Access to XMLHttpRequest at 'http://localhost:3000/' (redirected from 'http://localhost:3030/v1/auth/discord/logout') from origin 'http://localhost:3000' 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.

Access to XMLHttpRequest at 'http://localhost:3000/' (redirected from 'http://localhost:3030/v1/auth/discord/logout') from origin 'http://localhost:3000' 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.

On the express backend, I have set up cors options like this:

var corsOptions = {
    origin: "http://localhost:3000",
    credentials: true,
    optionSuccessStatus: 200,
};

app.use(cors(corsOptions));

var corsOptions = {
    origin: "http://localhost:3000",
    credentials: true,
    optionSuccessStatus: 200,
};

app.use(cors(corsOptions));

And this is the logout function from the backend:

export async function logout(req: Core.Request, res: Core.Response): Promise<(Core.Response | void | undefined)> {
    return res.clearCookie("access_token").redirect("http://localhost:3000")
}

export async function logout(req: Core.Request, res: Core.Response): Promise<(Core.Response | void | undefined)> {
    return res.clearCookie("access_token").redirect("http://localhost:3000")
}

Does anyone know how to fix the error?

16 Replies

lunar_talos_492•2y ago

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

BørgeOP•2y ago

i honestly have no idea. Everything else works, so i think it's the redirect back to the frontend

lunar_talos_492•2y ago

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

BørgeOP•2y ago

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?

lunar_talos_492•2y ago

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

BørgeOP•2y ago

That seems kinda like a security risk

lunar_talos_492•2y ago

are you using http only cookies for storing the auth session?

BørgeOP•2y ago

Yes?

lunar_talos_492•2y ago

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

BørgeOP•2y ago

Okay, but I would still like to fix the cors error. The redirect should be possible right?

lunar_talos_492•2y ago

i just did a quick google search and apparently redirects with cors is funky

lunar_talos_492•2y ago

https://stackoverflow.com/questions/42907451/how-to-solve-cors-redirection-with-express-js-router

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

lunar_talos_492•2y ago

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

BørgeOP•2y ago

Well everywhere i have looked they use the wildcard, but i can't really do that, when needing credentials

lunar_talos_492•2y ago

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

pradeep•2y ago

Can you share code

Gaming

Programming

Cors error

Did you find this page helpful?