Response headers empty with fetch
Updated on feb 18
I think I have found the problem and the solution is to declare the following response header on the GoRest server:
Access-Control-Expose-Headers: X-Pagination-Total,X-Pagination-Pages,X-Pagination-Page,X-Pagination-Limit
Hi, how can I access to pagination headers:
X-Pagination-Total
X-Pagination-Pages
X-Pagination-Page
X-Pagination-Limit
?
I'm trying this code:
const options = {
headers: {
"Accept": "application/json",
"Authorization": "Bearer MI-API-TOKEN-IS-HERE",
"Content-Type": "application/json",
},
method: "GET",
cache: "no-cache"
};
fetch("https://gorest.co.in/public/v2/users", options)
.then(response => {
console.log(response);
console.log("limit: ", response.headers.get("X-Pagination-Limit")); // line 16
response.headers.forEach( (val, key) => console.log(key + " -> " + val)); // line 17
return response.json();
})
.then(users => {
console.log(users); //line 21
})
.catch(console.log);
This is in console:
Response {type: 'cors', url: 'https://gorest.co.in/public/v2/users', redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: true
headers: Headers {}
[[Prototype]]: Headers
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "https://gorest.co.in/public/v2/users"
[[Prototype]]: Response
app.js:16 limit: null
app.js:17 cache-control -> max-age=0, private, must-revalidate
app.js:17 content-type -> application/json; charset=utf-8
app.js:21
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 2865, name: 'Chetanaanand Joshi Esq.', email: 'chetanaanand_esq_joshi@streich.name', gender: 'male', status: 'inactive'}
1: {id: 2864, name: 'Aayushmaan Chopra DDS', email: 'dds_chopra_aayushmaan@monahan-jacobson.name', gender: 'male', status: 'inactive'}
2: {id: 2863, name: 'Ekalavya Kaul Sr.', email: 'ekalavya_sr_kaul@kemmer.biz', gender: 'male', status: 'active'}
3: {id: 2862, name: 'Jitender Rana', email: 'rana_jitender@russel-becker.info', gender: 'male', status: 'inactive'}
4: {id: 2861, name: 'Sharmila Tagore Jr.', email: 'tagore_sharmila_jr@marquardt.info', gender: 'male', status: 'active'}
5: {id: 2860, name: 'Nagabhushanam Pilla', email: 'pilla_nagabhushanam@johnston.biz', gender: 'male', status: 'inactive'}
6: {id: 2859, name: 'Aanandaswarup Kaniyar', email: 'kaniyar_aanandaswarup@lindgren.io', gender: 'male', status: 'inactive'}
7: {id: 2858, name: 'Lakshmidhar Tagore', email: 'tagore_lakshmidhar@smith.co', gender: 'male', status: 'inactive'}
8: {id: 2857, name: 'Rudra Nehru', email: 'rudra_nehru@wintheiser.io', gender: 'male', status: 'inactive'}
9: {id: 2856, name: 'Annapurna Pilla', email: 'pilla_annapurna@bernier.biz', gender: 'female', status: 'inactive'}
10: {id: 2855, name: 'Sushma Ganaka Sr.', email: 'ganaka_sr_sushma@green.org', gender: 'female', status: 'active'}
11: {id: 2854, name: 'Tanushri Trivedi', email: 'trivedi_tanushri@schuppe.info', gender: 'female', status: 'inactive'}
12: {id: 2853, name: 'Mr. Ambar Nayar', email: 'nayar_mr_ambar@beier.co', gender: 'female', status: 'active'}
13: {id: 2852, name: 'Dhananjay Bhat', email: 'bhat_dhananjay@sauer-jakubowski.info', gender: 'male', status: 'active'}
14: {id: 2851, name: 'Damayanti Embranthiri', email: 'damayanti_embranthiri@schaefer.co', gender: 'male', status: 'active'}
15: {id: 2850, name: 'Ekaparnika Nair VM', email: 'vm_nair_ekaparnika@gibson-grant.com', gender: 'male', status: 'active'}
16: {id: 2849, name: 'Gov. Bhargava Abbott', email: 'abbott_gov_bhargava@nienow.biz', gender: 'female', status: 'active'}
17: {id: 2848, name: 'Mr. Bela Adiga', email: 'adiga_mr_bela@heaney-berge.info', gender: 'female', status: 'inactive'}
18: {id: 2847, name: 'Aasa Chopra', email: 'aasa_chopra@bernier.com', gender: 'female', status: 'active'}
19: {id: 2846, name: 'Chidambar Sethi MD', email: 'sethi_md_chidambar@willms-hermiston.biz', gender: 'female', status: 'active'}
length: 20
[[Prototype]]: Array(0)
In jQuery I am able access the headers like this (this what used in the https://gorest.co.in/rest-console page)
var jqXHR = $.ajax(rsq);
jqXHR.done((data, textStatus, jqXHR) => {
jqXHR.getAllResponseHeaders();
});
Similar methods might exists in other javascript lib
Doesn't work for me, I'm using vanilla javascript, this code fails again:
const request = new XMLHttpRequest();
request.open("GET", "https://gorest.co.in/public/v2/users");
request.setRequestHeader('Accept', 'application/json');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'Bearer MI-API-TOKEN');
request.onreadystatechange = () => {
if(this.readyState == this.HEADERS_RECEIVED) {
console.log(request.getAllResponseHeaders()); // line 34
}
}
request.onload = () => {
if (request.status >= 200 && request.status < 300) {
console.log(request.getAllResponseHeaders()); // line 39
} else {
console.log(request.statusText);
}
};
request.onerror = () => {
console.log(request.statusText);
}
request.send();
In console appears:
app.js:34 cache-control: max-age=0, private, must-revalidate
content-type: application/json; charset=utf-8
app.js:39 cache-control: max-age=0, private, must-revalidate
content-type: application/json; charset=utf-8
In https://gorest.co.in/rest-console I can get headers, but not from javascript with CORS request
Something is not right, why does the browser hide almost all gorest headers? Try this code
<!DOCTYPE html>
<script>
"use strict";
const showHeaders = response => {
// get one header
console.log('Header Content-Type->',response.headers.get('Content-Type')); // application/json; charset=utf-8
// iterate over all headers
console.log('All headers->',)
for (let [key, value] of response.headers) {
console.log(`${key} = ${value}`);
}
};
fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
.then (showHeaders);
fetch("https://gorest.co.in/public/v2/users")
.then (showHeaders);
</script>
In browser developer tools I can see the full headers (including GoRest), but I can't access the full GoRest headers from javascript. It doesn't matter if the request is CORS or not.
the difference between one request and another is that gorest declares an empty Access-Control-Expose-Headers, while github API declares with:
Access-Control-Expose-Headers: ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Used, X-RateLimit-Resource, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type, X-GitHub-SSO, X-GitHub-Request-Id, Deprecation, Sunset
.
Can someone at GoRest's server add the following response header?
Access-Control-Expose-Headers: X-Pagination-Total,X-Pagination-Pages,X-Pagination-Page,X-Pagination-Limit
I think this would fix the problem
Thankyou for debugging into it, It seems custom headers needs to be enabled at server side for CORS.
Can you please try now and see, I fixed this at server side
Hi, thank you! it works like a champ!
Great thanks for the confirmation