JavaScript Fetch with Request and Headers Objects

Going beyond just the basics of using fetch for AJAX calls, this video talks about the finer details of using custom Request objects, custom Header objects, as well as some of the methods that are available to deal with the response.
A brief discussion of using the Chrome Dev Tools to monitor the network requests is included.
Code GIST: gist.github.co...
List of Forbidden HTTP Headers: developer.mozi...
Request Object Reference: developer.mozi...
Headers Object Reference: developer.mozi...

[@craigjohnson8279]

This is the best tutorial that I've seen on the Fetch API. Other people only talked about the basic GET request but Steve takes it to another level. I now understand Headers, Methods, and Modes. Thanks for sharing the knowledge.

[@Kliamframe]

Really like your relaxing and in depth way on explaining. Helped me a lot. Thank you!

[@rotrose7531]

Second round, most comprehensive explanation on Headers() and Request() I found by far. Thank you.

[@zoverlvx8094]

You're like the Bob Ross of programming. Subscribed!

[@SteveGriffith-Prof3ssorSt3v3]

Now THAT is a compliment!

[@zoverlvx8094]

My pleasure!

[@Muhyideen869]

Thank you!! I was stuck because I kept receiving a response in XML format, I was pulling my hair out trying to figure out how to request JSON lol. Very clear explanations, thanks a bunch

[@ReV157]

Hey man, thanks a lot. Your video really helped me. I was having error and difficulty understanding this type of request, but your video certainly helped me in what I needed and I learned how to actually use fetch. A thousand thanks.

[@martyoconnor7211]

THANK YOU! Your videos are succinct and extremely useful.

[@herrschaufele7210]

Thank you for your very easy to understand tutorials

[@mitchell4217]

Wow, didn't even realize new headers() and new Request() were even a thing. Makes it a lot easier.

[@SteveGriffith-Prof3ssorSt3v3]

You can also use new Body( ) and new FormData( ) or when you get into Service Workers new Request( )

[@mitchell4217]

@@SteveGriffith-Prof3ssorSt3v3 Are these all stand-alone methods? Or do they only work with the fetch() method?

[@SteveGriffith-Prof3ssorSt3v3]

@@mitchell4217 they can all be used independently but they are not of much use unless you are sending and receiving things from the server... meaning fetch

[@mitchell4217]

@@SteveGriffith-Prof3ssorSt3v3 I was thinking more broadly, like would it work with AJAX, Axios, or whatever your method of choice.

[@kamaboko1]

I've watched a number of fetch api tuts on KZbin. Many are good and get the job done, but your layout is superior. I will unashamedly use this as a template. Thanks.

[@SteveGriffith-Prof3ssorSt3v3]

kamaboko1 glad I could help

[@imay6262]

Your voice sounds as the actor who gives his voice to Lex Luttor in the Latinamerican spanish version XD... nice video by the way!

[@kezioevan1030]

Thankyou bro, your video saved my problem :)

[@juanpumpkinpie6550]

stunning explanation Steve! There is a group videos of Fetch API topics?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. I have a playlist about AJAX - kzbin.info/www/bejne/bXaulpWYabuIj7M

[@rumbly438b7]

Thanks. Quite an impressive library of videos. I was going to request a vid on using headers with fetch but here it is.

[@SteveGriffith-Prof3ssorSt3v3]

Glad I could help.

[@behindthescenex]

Mr. Steve thank you so much for your lecture and your easy to catch explanation. Sir, if i may can i request a tutor about using fetch for the oAuth system ? Im currently want to get some data of song titles from the spotify web api, and its hard to get the data from the api because i need to get token first within the oAuth system. Ive read the docs and still i cant figure it out. Waiting for your reply sir. Once again thank you so much ! :)

[@Kliamframe]

Did you use fetch to make your request? ;)

[@angladephil]

Thank you for this very didactic, well structured and explained tutorial ! In addition, as a Frenchman, I appreciate that your English accent is very understandable... Technically speaking, I guess I may "simulate" or "implement" the example URI you provide with a local node.js server, am I right ? Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. And Yes. You can do that.

[@CarlosSantana-mf9tl]

No hablo inglés pero explicas tan bien que hasta te entendí en español jajaja xd

[@blayke602]

Hey steve, I've been an avid watcher of your js vid series. I recently stared learning about web development through your channel in hopes of becoming a frond end dev someday. I just want to know, in which instances am I required to setup my custom request/ header like what you did on this tutorial, compared to just regularly using xmlHttprequest or basic fetch?

[@SteveGriffith-Prof3ssorSt3v3]

I stopped using XMLHttpRequest a few years ago. fetch has better security and eventually XHR will be dropped by the browsers. The only time you have to use the Request object or the Header object are when you need to customize things - need an Authentication header? Send form data to the server? need special settings to deal with CORS?

[@blayke602]

Steve Griffith thank you very much!, i'll keep that in mind

[@raycoustum]

I couldnt understand very much, but i finished my practice. Thnks

[@MichalRutz]

Excellent job! thank you so much!

[@saadowain3511]

You are a gift from God.

[@deependrasinghshekhawat2856]

thanks again :)

[@poderaccionsocialcolombia9847]

Hello Steve, thank you for sharing with us valuable content, with patience and language easy to understand for us, the beginners. I am trying to run this for getting data from coinmarketcap API, using the key and url respectively. In VS Code everything is ok, but when inspecting element in the browser, it throws the Error. I already used the mode: 'no-cors', but not getting anywhere. Any help would be appreciated.

[@SteveGriffith-Prof3ssorSt3v3]

If you are requesting data from a domain that is different than where your html came from then you can't use no-cors. It is literally a different origin. It is a cors request.

[@poderaccionsocialcolombia9847]

@@SteveGriffith-Prof3ssorSt3v3 thank you very much for the response. Reading in more detail that app, coinmarketcap has restrictions to access its APIs throughout javascript. So I´m getting into node js to acquiring the data needed. I am checking out your videos about this 😃

[@KhanhTran-yx2zd]

The way you explain things is magical, thank you! While playing around with the fetch API I ran into an issue that I'm not sure how to get around. I made a fetch request to a URI that simply returns the webpage at that URI. I then proceeded to try and set a cookie on the Response object returned by the fetch request, but noticed that the headers property of the Response object is read-only. How would one accomplish the task of setting a cookie for the Response object returned by fetch? I was looking to try and set a cookie on the client when they receive the webpage returned by fetch.

[@SteveGriffith-Prof3ssorSt3v3]

You can't modify the Response object. It is created by the server and sent to the fetch. All the properties in the Response are read only. The Request object is the one that you can assemble to send with the fetch call. However, cookies can be created in the browser with document.cookie. If your fetch Request is being sent to the same domain as the webpage then the cookie will be included by default. The Request object has a property called credentials. By default, its value is 'same-origin', which means if the domain is the same as the webpage then include cookies. The other values are 'omit' and 'include' which describe what to do with the cookies from document.cookie.

[@KhanhTran-yx2zd]

@@SteveGriffith-Prof3ssorSt3v3 Perfectly explained, thank you! I feel much more relieved now that I feel like I'm absorbing the material. So if the fetch request is to a resource of the same domain, I can use document.cookie to set a cookie that will be sent with the fetch request. However, I'm guessing that this isn't possible from the server-side only, since document.cookie needs to be set from the client-side? Since Response objects are read-only, it seems that the only way to use cookies alongside a fetch request is by setting it up from the client-side first? I was hoping to do everything from the server-side. I looked into creating my own Response object so that I can create my own headers, but at the same time using the contents contained within the Response object returned by the fetch request (in this case, it contains a webpage). Although, I have no idea if you can construct a new Response object using contents of another Response object as its body... Any insight would be appreciated, but don't feel obligated. You've help me understand the fundamentals, so thanks again!

[@SteveGriffith-Prof3ssorSt3v3]

@@KhanhTran-yx2zd The Server-side code is what builds and sends the Response Object. It can set cookies that will be received and set in the browser.

[@zhenghaohe4727]

A question: at 8:00 you said you will get the file back but then based on the cors policy that will tell me whether or not I'm allowed to actually view that data. So does that mean, the stuff that's requested cross origins will arrive to the client's browser no matter what. Depends on the cors policy that the server set, the client's javascript might or might not have access to those stuff?

[@SteveGriffith-Prof3ssorSt3v3]

CORS does a preflight request to test the origin and look for the appropriate headers. It will block some things outright. However, there is also CORB cross origin read blocking, which will prevent the loading into memory of things that came back to the server. I didnt get into the full discussion of CORS and CORB. That's a whole other video in itself.

[@bellemcky]

Thanks so much Steve!

[@rotrose7531]

Legend, Thank you!

[@waleedsharif618]

Could you possibly help(or send some video link) me with one thing, i need to retrieve data(using javascript or react hooks) from the API , API has end points( i have url link for them) and both end points require an API-key. API key is set in the http-request header with key #####. Access-Control-Allow-Origin is set to any origin (`#`). If you possibly could help me or send some tutorial video helping retrieve data knowing this kind of information, would appreciate. Have learned a lot from your hard work, thank you for that !

[@SteveGriffith-Prof3ssorSt3v3]

Here are a few videos that should help kzbin.info/www/bejne/g6exhWOAnthgac0 kzbin.info/www/bejne/gKaYd3qZrs6Ze6M kzbin.info/www/bejne/sKTammOZhbKrqbc

[@waleedsharif618]

Steve Griffith thank you for answering, i have two more question regarding this. 1: since i know the value of x-api-key which is set in http-request header should i use setRequestHeader()?. 2: i dont have access to other side (regarding access-control-allow-origin) so i cannot add those files you mentioned in video but if its set to any origin already do i need to ?

[@DOUBLE0SEVUN]

How would I add a bearer token to the fetch request? I have an api_key that is required in the request and I don't where to place it to properly get the json data back. When I make the request it says that I am unauthorized.

[@lowencholawliet5383]

Same here. Can't add bearer token. Im using axios api. :/

[@durgani]

Thanks, you've helped me!!!

[@ke6944]

Professor, should I learn HTTP before Async JavaScript?

[@SteveGriffith-Prof3ssorSt3v3]

HTTP is not really something that you need to study and learn if you understand the idea of what it is. When a browser and a server talk to each other they do this through Requests and Responses. HTTP is the format of those requests and responses. There are HTTP Methods that are used for the requests. GET - the default. A READ request for some resource. POST - you are uploading data to create some new resource (think submitting a registration form) PUT/PATCH - updating a resource DELETE - deleting a resource HEAD - you just want the headers for the resource as the response. All requests and responses are made up of a HEAD and a BODY. The BODY is the uploaded data or attached file. The HEAD are all the settings and meta info about the request or response. If you understand that, you have enough to do any fetch / ajax call. I assume that is what you are asking about based on the video where you added the comment. Asynchronous Javascript is something else. - kzbin.info/www/bejne/h169npZmepV6j7s - fetch and promises are a small part of that.

[@ke6944]

@@SteveGriffith-Prof3ssorSt3v3 Thanks

[@romeojoseph766]

May I know where you get this much knowledge?

[@SteveGriffith-Prof3ssorSt3v3]

I started web development back in 1996... so I've had a long time to accumulate information. 😉

[@romeojoseph766]

@@SteveGriffith-Prof3ssorSt3v3 kinda jealous of you hehehe

[@anirudhkhanna3615]

Thanks a lot. Very Helpful video.

[@scottvu8366]

Thank you ❤️

[@isniphsi7843]

Wath if i dont set the header? Or can i set the accept header to accept all ? In my case i want to send leage flies via stream

[@isniphsi7843]

Accept header to accept all is */* Right ? Good Video thx

[@SteveGriffith-Prof3ssorSt3v3]

The accept header in a request is a suggestion for the server. You list your preference for file types to be returned from the server, in response to your specific file request, IF there are multiple options. Eg: json vs xml or jpg vs png. Headers have default values that are set by the browser when you make your request. Not all headers are needed with every request. The browser will add the ones that are needed. If you are using web sockets and sending a stream that is different than the HTTP headers that I am covering in this video.

[@kabakiAntony]

I have a backend that has a login route that returns a token on success, how do I ensure that the next page after login uses the token , rather how do I send the token in when I am getting the next page after login to ensure that I only get to that page when I am logged in and with a verified token

[@SteveGriffith-Prof3ssorSt3v3]

Typically you would put the token into sessionStorage which would be accessible by all pages on the website. Access to the page itself is not something that the token allows or prevents on the client side if we are using sessionStorage. We would use JS to get the token from sessionStorage and then make a fetch request for the DATA with the token in the Authorization header. I really don't care if someone downloads the HTML shell of a page. I do care if they want to access private data on that page. If you are building a website with multiple HTML files you could put the token into a cookie which would automatically be sent with each request. Then the code on the server would decide whether or not the page is allowed to be sent to the browser request.

[@kabakiAntony]

@@SteveGriffith-Prof3ssorSt3v3 Thanks a lot let me puch the code with that in mind.

[@Sejira]

There is a way to make a specif Http request and save one or all http request headers? Request, not response. Thanks

[@SteveGriffith-Prof3ssorSt3v3]

Every time you make a fetch call you are returned a Response Object. The fetch call itself that you are sending has a set of Request headers. You define this in the options object for the fetch all. The headers can be passed in as a regular JavaScript object. There are many headers that you are NOT allowed to set though. See the lists of forbidden ones here - developer.mozilla.org/en-US/docs/Web/API/Headers

[@Sejira]

@@SteveGriffith-Prof3ssorSt3v3 I asked for security reason and test. You says "you define this", so if i make a fetch request with var = Request.Headers, i have to set the headers after. My question is about possibility of get headers like Authorization with XSS vulnerability. So i have js inside my page(who is in restricted area with basic auth, i open my page, js do a fetch request in the same page(im just testing) and then save the Authorization value header for request, with the previusly saved value in my browser. I don't want to define anything.

[@SteveGriffith-Prof3ssorSt3v3]

@@Sejira fetch( url, options) .then( ) .then( ) .catch( ) Inside the options object you can define your own headers. The browser will add its own headers regardless of what you do. There is a list of forbidden Request headers that you are not allowed to set via JavaScript. There is a list of headers that you cannot access from the Response object too. To set the headers in the Request... let abc = new Headers(); abc.append('x-my-header', 'my header value'); let options = { headers: abc } OR let options = { headers: { 'x-my-header': 'my header value' } } Both approaches work. The value of options.headers can come from anywhere. The source of your values is the security risk. Never let users provide these values. The browser will look at the values you use BEFORE the fetch( ) is sent. It will merge its own values before it is sent.

[@Sejira]

@@SteveGriffith-Prof3ssorSt3v3 Thanks for reply again :) Any chance to contact you privately? Twitter, mail or what you have. "The browser will add its own headers regardless of what you do" Okay but, i want to do a fetch request with fetch (url) and after define a variable with inside the previously header request. So, im in restricted area with Auth header saved in my browser, because i have put credentials before ofc. var myRequest = new Request('192.168.1.129/index.html'); var myHeaders = myRequest.headers; var specificheader = myHeaders.get('User-Agent'); // just for try one var myRequest2 = new Request('192.168.1.129/'+ specificheader); fetch(myRequest).then(fetch(myRequest2)); OR var myRequest = new Request('192.168.1.129/index.html'); var myHeaders = myRequest.headers; var myRequest2 = new Request('192.168.1.129/'+ myHeaders); fetch(myRequest).then(fetch(myRequest2)); The myheaders variable is always still empty when i try to send it away. "The browser will add its own headers regardless of what you do" But how can i save them in to a variable?

[@ashishmangla221]

I am trying to fetch data using headers but I am getting following error 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[@SteveGriffith-Prof3ssorSt3v3]

That means that the server is not sending you the access-control-allow-origin header. Without that your browser is not allowed to use the data

[@ashishmangla221]

@@SteveGriffith-Prof3ssorSt3v3 but i can get data in postman. Can I share my code with you

[@SteveGriffith-Prof3ssorSt3v3]

@@ashishmangla221 Postman does not have the same CORS restrictions that browsers do.

[@ashishmangla221]

@@SteveGriffith-Prof3ssorSt3v3 one more question when I am sending api key in url I am able to get data. And when I am sending key in header I am getting error. Why it's so. I am trying to fetch data from coincap market

[@SteveGriffith-Prof3ssorSt3v3]

@@ashishmangla221 the way you have to send the data depends on how the API is configured. They might want it in the url path, or in a header, or a cookie, or the query string, or form data or JSON string in the body of the request. Every API is different. You need to read their documentation to see what they expect.

[@giorgibatsiashvili4270]

awesome

[@nathanbrunetti9852]

What would you do if your using an API that requires you to pass a userName and API key?

[@SteveGriffith-Prof3ssorSt3v3]

It would really depend on how the API wants those passed - as a queryString parameter, as a FormData field, or as a basic authorization header. I have videos on those topics too. Fetch / AJAX Playlist - kzbin.info/www/bejne/bXaulpWYabuIj7M

[@nathanbrunetti9852]

Hey Steve, thanks for the fast reply. I believe its looking for a basic authorization header. I will check out this video and let you know if it worked. Thanks.

[@nathanbrunetti9852]

Hey Steve I watch this video (kzbin.info/www/bejne/g6exhWOAnthgac0) and I feel like I'm very close, but I'm getting this error in the console (Failed to load MY_URL_HERE: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin '127.0.0.1:49724' is therefore not allowed access.) Any other suggestions would be greatly appreciated. Thanks.

[@mukeshshah2204]

Nice video

[@SteveGriffith-Prof3ssorSt3v3]

Thanks! Don't forget to subscribe so you get notified as I add more videos each week.

[@thedev6368]

request is depreciated now, shouldn't use it if watching presently

[@SteveGriffith-Prof3ssorSt3v3]

What are you talking about specifically? Request is a core part of how fetch works - developer.mozilla.org/en-US/docs/Web/API/Request/Request Request, Headers, Response, Body, and URL - these are the parts that make up every request and response.

[@CindyExPlayer]

How put parameters in method post??

[@SteveGriffith-Prof3ssorSt3v3]

You put them in a FormData object and then set the value of the body property of the Request object to that FormData object. kzbin.info/www/bejne/b57LqqJnrLZ6m6s

[@vikasprasad7565]

i am getting cors issue

[@SteveGriffith-Prof3ssorSt3v3]

This should help - kzbin.info/www/bejne/sKTammOZhbKrqbc

[@sajidhussain6712]

CORS_ORIGIN_ALLOW_ALL=True

[@mohammadesmaielemadi8480]

TY, excellent video.