Fetch, CORS, and Cookies

This tutorial explains the process of setting cookies in the browser as well as from the server. It shows the process of setting cookies from the server using NodeJS and Express.
The various situations that can arise with cookies when trying to set them via fetch and how CORS scenarios will impact those requests and the cookies.
Code repo from the video - github.com/pro...

[@amish198]

Sir your teaching is really great, I have seen lots of videos about this topic on yt but no one can teach you like this ,you are awesome Thank you so much from India

[@ramiroantoniomarino]

I was suffering with cookies and fetch until now. Thank you so much

[@ahmadnku8336]

Any idea?? I am setting cookie with secure=true, sameSite=none, httponly=false, on frontend i am setting credentials=include as well, since frontend is on other domain and backend is on other domain. I see the Set-cookie response header with correct value but browser is not setting it in its cookie section. no warnings, no errors whatsoever. In localhost since frontend/backend on same domain (localhost) and i set secure=false it works. BUT in production with this configuration secure=true, sameSite=none, httponly=false, browser do not set it.

[@seniorreact9627]

You’re truly a life saver! I’ve been searching for a video like this everywhere on the internet!!!

[@Daniel-nb3kk]

Great job, Steve! Explained a complex topic very concisely and professionally! :)

[@yinonelbaz5309]

This channel never disappoints with a true sting

[@iwswordpress]

This is excellent. A very difficult topic. Thanks for the hard work that went into this.

[@maxtayebwa8987]

Super insightful, prof! I really appreciate what you have done for me in my career as an engineer! You have really my skills in a way I could only have dreamed of! Blessings!

[@karsynmayson3687]

I know I am kinda randomly asking but do anyone know a good place to watch newly released series online?

[@luisedward282]

@Karsyn Mayson Flixportal =)

[@karsynmayson3687]

@Luis Edward thank you, signed up and it seems to work :D Appreciate it !!

[@luisedward282]

@Karsyn Mayson you are welcome =)

[@vinception777]

Oh my god. You made this SO clear, thank you so much, I was breaking my head around this concept, trying to set things up with AWS. Many MANY thanks, from France, best regards !

[@hemersonallan]

You deserve 1 million likes, thanks a lot !

[@mayuratalekar8534]

Thanks Steve for the video. Do you have video for passing Authorization in header for CORS

[@SteveGriffith-Prof3ssorSt3v3]

Depends on what kind of authorization you are talking about. JWT - kzbin.info/www/bejne/h3SmnoqEoaqemrs headers in fetch responses - kzbin.info/www/bejne/a5jRq2mEj5iHiKM headers in requests - kzbin.info/www/bejne/j3uai5p9o82Ba80 access control allow origin header (using apache) kzbin.info/www/bejne/sKTammOZhbKrqbc

[@arpansaha130]

Such a clear explanation of everything! Loved it.

[@ivan.romaniv]

That's the best CORS explanation ever!! thank you!!!

[@GauravRaj21]

Cannot thank you enough. Going through tens of SO posts, but seeing everything in one place like this helped click it all together.

[@adityakhatwa8555]

I was actually looking for the cookies content. Was stuck in a MERN project and can't able to access the backend cookies 🍪 on to the frontend. Thanks for the video.

[@adityakhatwa8555]

@Kabir Lance 😅

[@HarshKapadia]

You were right, I keep coming back to this video haha

[@callegarip]

Thank you. But you did not explain about fetching from a mobile device for example from an iphone. cross site cookies wont be sent. Can you please talk about this?

[@SteveGriffith-Prof3ssorSt3v3]

That is just the nature of cookies and the changes over the last few years. 3rd-party cookies are being blocked more and more, not just on mobile.

[@MatterAAA]

Hi Steve, I am still a little lost. How can someone use a JWT with cors then? Where else can I store it, if JS cannot access set-cookies?

[@SteveGriffith-Prof3ssorSt3v3]

Your JWT token can be saved in cookies or localstorage or indexeddb. JS can set cookies but only for the same domain as the html file that loaded the JS.

[@imanidioli]

I can't express my appreciation

[@DinoDrugs1229]

Seriously great video. I've been trying to figure all this out for days and this video was 100% exactly what I needed, really awesome stuff.

[@imanidioli]

Does cors enabled server treat the domain name as cross origin or same origin? I mean the host ip could be considered as 127... and localhost as domain name?

[@SteveGriffith-Prof3ssorSt3v3]

It will treat them as cross-origin. Changing a port number will do this too.

[@ChrisFotosMusic]

my dude steve is the bob ross of programming

[@gashmadev7385]

Saved tons of time! Thanks🙏

[@Antony00794]

Hey Steve, is this video still up-to-date? I'm working on a project with a very similar scenario... everything was working while on localhost, I read the mozilla documentations and had implemented everything as you have done in this video. However, when deploying it to a remote server and accessing it over https, the browser wont set the cookies from a cors request anymore, not even with a "Secure" attribute set. Now I am reading some comments on stack overflow, stating that browsers "generally refuse to set such third party cookies", which is in complete contradiction to your video and to the explanations on the mozilla doc... what is your opinion to all of this?

[@SteveGriffith-Prof3ssorSt3v3]

cookies are only meant to be set by your script for the origin/domain that loaded your script. If you are talking about CORS requests then you are, by definition, talking with a different origin/domain. You can control whether your current cookies are sent with the requests to those other origins but you cannot set them.

[@Antony00794]

@@SteveGriffith-Prof3ssorSt3v3 Ok thank you! This means, if for example I am doing a CORS fetch request from domain A to domain B, cookies for domain B could be sent along with the request, if they had been set before by a script of domain B itself, correct? but the browser would ignore any "Set-Cookie" headers for domain B in the response of the CORS request?

[@stephenthumb2912]

really great video. Was using req.origin as the "allow-origin" value just for demo? For CSRF protection in production, is that ok? I can't find a proper way to use auth jwt http-only in a public b2c style app because http-only requires credentials: true which requires known origins which for an publicly open app we won't know.. Thanks so much.

[@SteveGriffith-Prof3ssorSt3v3]

It will depend on the site / api that you are building what you use as the allow origin origin. Do you want to allow requests from anywhere? If so, then req.origin is fine. If not then you will be looking at other values like headers or query string values with an api key. the http-only cookies can be used for navigation type requests made by the browser but will never be accessible to any client-side script driven fetching.

[@LeftThumbBreak]

@@SteveGriffith-Prof3ssorSt3v3 I get confused then with the client side (public user's computer), that's interacting with a front end client side framework like React. Since it's CSR, is the client ,some computer on the internet, going to be always making a CORS call because client's computer will obviously be on a different domain, than the host of the React server and backend server. If that's true then to use http-only, i would always need to use req.origin as the allowed-origin?

[@SteveGriffith-Prof3ssorSt3v3]

@LeftThumbBreak CORS means that the main origin is the one where the HTML file came from. Any other files loaded from that point on will have their origin compared to the html one

[@b.o.t7888]

Doesn't work anymore, right? The warning also said the same around 30 mins in video

[@SteveGriffith-Prof3ssorSt3v3]

What doesn't work?

[@indicgamer2907]

can you please help me im writing a server that sends session cookies (using express session), and a frontend website that makes request to it. It worked fine locally when i set up both the server and the website on different ports and also got the warning sameSite=lax when changed it to localhost. But when i deployed the server and the website, I changed to sameSite to none (as it will be cross site request) and set secure to true but even then I'm not receiving cookies from my response. pls help UPDATE: I tried setting samesite to lax and deployed it again, i got the same warning "samesite=lax should be set to none" and when i set to none, i get no cookie back :(

[@ahmadnku8336]

did you find a solution?

[@sohamsaha7162]

Even I am facing the same problem

[@jorgegabitto1813]

Great video! Though I've been having issues setting my cookie in the browser when I have my server deployed on Heroku and my frontend deployed on Netlify. It works on localhost but not in production. Do you happen to have any idea why the cookie is not being set? The cookie is being passed to the response in the Set-Cookie header, but for some reason it is not being set in the response.

[@SteveGriffith-Prof3ssorSt3v3]

Cookies are tied to the domain that they come from. If a cookie comes from server A then server B is not allowed to see it. That means files from server B cannot read it.

[@jorgegabitto1813]

@@SteveGriffith-Prof3ssorSt3v3 That makes sense. So is there an alternative to cookies that I can use? I could probably set the cookie from the front end, but I don't know if that's a good idea.

[@SteveGriffith-Prof3ssorSt3v3]

@@jorgegabitto1813 there are many ways to pass data between client and server or save data locally. It all depends on what you are looking to achieve with the data.

[@jorgegabitto1813]

@@SteveGriffith-Prof3ssorSt3v3 Essentially I want to make sure that the user is logged in. The cookie has a token that the user receives after they log in. What are my options for saving that token?

[@SteveGriffith-Prof3ssorSt3v3]

@@jorgegabitto1813 cookies or localstorage or sessionStorage are your options for saving tokens

[@Stefan-xm9qb]

If I refresh the site, the cookie disappears under "Application" in chrome inspector. Anyway I just changed the servers port from localhost to 127.0.0.1 and changed SameSite=None to SameSite=Lax and now cookie stays even after refresh. So your video still helped me, thanks!

[@saschagobbels2177]

Absolute great content ! THX :)

[@unique_god]

Hi good explanation Brother although my problem has not been fixed, I use react with laravel sanctum for jwt token I think there is a problem with how they handle cors or the axios does not work propery

[@SteveGriffith-Prof3ssorSt3v3]

I've never used Laravel sanctum. I assume that there is something that you need to do in order to send the proper headers from the server. Without the access-control-allow-origin header you will get CORS errors.

[@hipeoplesocialmedia]

hello I need help, I have links hls live streaming on these links I have to enable the cors support, because now the view of the live channels, after a minute is blocked, for this I have to enable sharing between the origins can you help me? Taking into account that I cannot access the server so I should bypass the cors, can you help me?

[@SteveGriffith-Prof3ssorSt3v3]

CORS is security implemented by the browser to protect users. You need both the server and the browser to agree that it is safe for users to access content. It is not something that you bypass.

[@PraexorVS]

But fetch and cors are the same? I use fetch to bring data from an public api to my website without cors

[@SteveGriffith-Prof3ssorSt3v3]

fetch is the API used to make requests for remote data. CORS (cross-origin resource sharing) is the set of rules governing how browsers must handle data that comes from domains that are different than the one the HTML came from. They are intimately connected but they are different things. The CORS rules apply to every cross-origin request. If your public api requests are working it means that the browser and the server are meeting all the CORS requirements.

[@mareczek1613]

That was very helpful, thank you

[@mehmetaltinsoy525]

Great explanations. Thanks.

[@Tari9a_L3ilmia]

easy to understand with you, thank you

[@ИльяБунчук-ь3я]

You cool bro. From Belarus with brother's love

[@Ofcl-Javed]

A great video indeed sir, Please help me out here, I have created a rest API using node and express which i hosted at localhost:8080 and it working just fine with postman. Now i created a separate frontend project at localhost:5500 with vanilla js not any framework so i get the CORS error when fetching the api then i updated by backend use the cors and set the desired option and when i sent a request from port 5500 to port 8080 it set the cookie in res headers i mean api send back the token in res but the cookie get set at the api endpoint like i made a fetch a request from localhost:5500 to localhost:8080 and in response i get the json messge but the cookie has been set at the origin localhost:8080 , although i'm still able to access the cookie but why it set on the backend endpoint please help

[@SteveGriffith-Prof3ssorSt3v3]

When cookies are set, they are connected to the origin that set them. The server can only set them for that origin. The script in the browser can only set them for the origin that loaded the HTML file.

[@galfankasec7748]

What about set in browser a httpOnly cookie.?

[@SteveGriffith-Prof3ssorSt3v3]

That will stop any JavaScript from using the cookies and their values. That works if you don't need the access.

[@HarshKapadia]

Wow. This is absolute gold! Thank you so much for doing this! There are so many things to this that I'm going to have to watch this a few times, but that's not your fault. Your explanation is really good. I will take some time to wrap my head around this haha

[@abulfazlhaidary2002]

Excellent job, thank you so much.

[@lucas.n]

damn this shit is a whole lot more convoluted than i ever thought haha And I've been doing web things since 2000s.

[@johnlinnane808]

Excellent video.

[@MehulKumar_m3huL]

Can somebody segment this video?

[@SteveGriffith-Prof3ssorSt3v3]

Why not you?

[@IonutBucur-o_0]

Thank you!

[@adityakhatwa8555]

Was it just me or you guys also noticed that there is an Om 🕉 sound in the background after 15:30 .

[@SteveGriffith-Prof3ssorSt3v3]

No place like Om.

[@naive-fleek7420]

saved my ass bro

[@dhgit3914]

great 10x :-)

[@ansilver4435]

Thank you so much for your efforts 🌹🫶🫶 i had one problem that the Cookie Request header will not be sent in Firefox 106.0.5 64bit on ubuntu i will test. it on windows and leave a comment. i think this because 3rd party cookie are blocked by default in firefox

[@SteveGriffith-Prof3ssorSt3v3]

Yeah that is where the standard is heading - blocking 3rd party cookies by default

[@84Juli1]

Thank you !!