Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript fetch api : Can't retrieve some response header

I am using the javascript fetch API to query a cross-domain api using this code :

fetch('https://api.com/search?query="2016"').then(function (response) {

  console.log(response.headers.get('Access-Control-Allow-Headers'))

  console.log(response.headers.get('Content-Range'))
  console.log(response.headers.get('Accept-Range'))

  console.log(response.headers.get('Date'))
  console.log(response.headers.get('Content-Type'))
})

The response headers are as follow :

Accept-Range:cars 300
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept, Content-Range, Accept-Range
Access-Control-Allow-Methods:PUT, POST, OPTIONS, GET
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Connection:keep-alive
Content-Range:0-99/1941
Content-Type:application/json
Date:Tue, 12 Jan 2016 12:17:55 GMT
Transfer-Encoding:chunked

What is very strange is that only "Content-Type" is working for others i get null :

null
null
null
null
application/json

What do i need to do to retrieve those null headers ?

like image 564
Manel Avatar asked Jan 12 '16 12:01

Manel


People also ask

How do I get response headers in fetch API?

We then fetch this request using fetch() , extract a blob from the response using Response. blob , create an object URL out of it using URL. createObjectURL , and display this in an <img> . Note that at the top of the fetch() block, we log the response headers to the console.

Can JavaScript access response headers?

Can I read response headers in JavaScript? While you can't ready any headers of HTML response in JS, you can read Server-Timing header, and you can pass arbitrary key-value data through it.

How do I see all response headers?

To view the request or response HTTP headers in Google Chrome, take the following steps : In Chrome, visit a URL, right click , select Inspect to open the developer tools. Select Network tab. Reload the page, select any HTTP request on the left panel, and the HTTP headers will be displayed on the right panel.

How can I get response data from fetch call?

The Fetch API allows you to asynchronously request for a resource. Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json() . These methods resolve into the actual data.


1 Answers

Damn i was using 'Access-Control-Allow-Headers' instead of 'Access-Control-Expose-Headers'

It works now

like image 148
Manel Avatar answered Nov 09 '22 17:11

Manel