cors trouble with localhost
I am trying to set up cors so that it works with vite front end. But it keeps failing even tho the console error in chrome seems to say that the origin matches.
I found this bug but I can't really make sense of why this is the behaviour unless even the people in the bug thread don't know how to explain this
https://issues.chromium.org/issues/40499674
18 Replies
my intention was to have an env var in the server side that contains the allowed origin but I don't think I can get that to work
Oh my god it does work with cors.
I was doing this
That slash after 5173 was the problem. I thought it'd take care of it but no it has to be exact match with no slash
http://127.0.0.1:5173Yep. CORS is super pedantic
A related question. Is it better to have a env variable containing allowed client origins on the backend code
And similarly for client side code a server origin that will be substituted during build process.
Or for development i should just use vite's proxy
And is there a way I can replace the 127.0.0.1 with localhost keyword? Because currently that doesn't work
no: it has to be the EXACTLY SAME host
127.0.0.1 and localhost are NOT the same
yes, both point to the same ip, but they are not the same
Hmm alright. I'm not sure if localhost always points to 127.0.0.1 or it can be os specific that's why I asked
Exact ip address it is
Oh localhost can also mean the ipv6 loopback address
it's not just that: it's just not the same
127.0.0.1 and localhost are not the same
one is a domain name and the other is an ip
it's not the same
even if localhost points to 127.0.0.1, it doesn't matter: a domain name and an ip address are different things, therefore not the same
and it all must match, or you will have weird issues
Gotcha
To clarify a bit:
localhost is a domain that points to 127.0.0.1 (or whatever your local IP is). But again, CORS is pedantic AF so while it points to the IP it's not the IP. It's pretty easy: localhost != 127.0.0.1 right? Simple string comparison.that
i couldn't explain it any better
also, it being "pedantic AF" is a VERY good thing
I've been thinking about it all day at work lol. So I've had time to mull it over and find an ELI5
a what?
Explain it like I'm 5
But yeah that makes sense
OH
it's the first time i see it
What about this. Are env vars to put 127.0.0.1 origin the way to go during development.
May seem like a simple question but in that past people have told me to just add vite proxy and only add cors when app is done
environment variables are a great thing to use in dev and prod, as it allows you to change code without changing code.
You can do if/else if branches on the value of one, or use it for setting specific strings that can change, etc
It's also a handy way to change API keys, too! If you need to retire one or if you have different key for dev vs prod
Environment variables are a woefully underappreciated and under utilized thing by the JS community mostly b/c most JS devs don't understand how they work and are afraid of "black magic"
So it's good to use them. Nice to know
Yeah I have used it for api keys and db connection string wasn't sure about cors origins
Oh, yeah, DB connection strings are great, too. Basically anything that can change or should change can be an env var so it's super easy to change. And they're a lot more secure than most people think if you set up your server correctly
But that
if is a big one. You have to know how to make new users on your Linux server and seperate concerns—IE each service be run under a different user so you don't "pollute" env vars and that way if one user is compromised somehow they can't access the env vars for the rest of your usersI haven't had to do that yet because I mostly used entirely new server in most online hosting solutions like railway i think? but it would be nice to be able to host everything on one server