JavaScript Fetch with Request and Headers Objects 

Now THAT is a compliment!

My pleasure!

kamaboko1 glad I could help

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

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

@@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

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

Glad I could help.

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 ! :)

Did you use fetch to make your request? ;)

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?

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

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

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.

Thanks. And Yes. You can do that.

Yes. I have a playlist about AJAX - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7EKebb4VUYQ.html

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.

@@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 😃

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. - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Q-Zmc0E0GYY.html - fetch and promises are a small part of that.

@@SteveGriffith-Prof3ssorSt3v3 Thanks

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

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

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

@@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

@@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.

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.

@@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!

@@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.

Here are a few videos that should help ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MvNT0Jis-3k.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ju5FGcyifEA.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zswi0cPMxsU.html

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 ?

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

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.

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.

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

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

@@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.

@@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.

@@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?

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

@@SteveGriffith-Prof3ssorSt3v3 kinda jealous of you hehehe

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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7EKebb4VUYQ.html

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.

Hey Steve I watch this video (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MvNT0Jis-3k.html) 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.

You put them in a FormData object and then set the value of the body property of the Request object to that FormData object. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9mhyo1wQGeI.html

This should help - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zswi0cPMxsU.html

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.

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