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: '[email protected]', gender: 'male', status: 'inactive'}
1: {id: 2864, name: 'Aayushmaan Chopra DDS', email: '[email protected]', gender: 'male', status: 'inactive'}
2: {id: 2863, name: 'Ekalavya Kaul Sr.', email: '[email protected]', gender: 'male', status: 'active'}
3: {id: 2862, name: 'Jitender Rana', email: '[email protected]', gender: 'male', status: 'inactive'}
4: {id: 2861, name: 'Sharmila Tagore Jr.', email: '[email protected]', gender: 'male', status: 'active'}
5: {id: 2860, name: 'Nagabhushanam Pilla', email: '[email protected]', gender: 'male', status: 'inactive'}
6: {id: 2859, name: 'Aanandaswarup Kaniyar', email: '[email protected]', gender: 'male', status: 'inactive'}
7: {id: 2858, name: 'Lakshmidhar Tagore', email: '[email protected]', gender: 'male', status: 'inactive'}
8: {id: 2857, name: 'Rudra Nehru', email: '[email protected]', gender: 'male', status: 'inactive'}
9: {id: 2856, name: 'Annapurna Pilla', email: '[email protected]', gender: 'female', status: 'inactive'}
10: {id: 2855, name: 'Sushma Ganaka Sr.', email: '[email protected]', gender: 'female', status: 'active'}
11: {id: 2854, name: 'Tanushri Trivedi', email: '[email protected]', gender: 'female', status: 'inactive'}
12: {id: 2853, name: 'Mr. Ambar Nayar', email: '[email protected]', gender: 'female', status: 'active'}
13: {id: 2852, name: 'Dhananjay Bhat', email: '[email protected]', gender: 'male', status: 'active'}
14: {id: 2851, name: 'Damayanti Embranthiri', email: '[email protected]', gender: 'male', status: 'active'}
15: {id: 2850, name: 'Ekaparnika Nair VM', email: '[email protected]', gender: 'male', status: 'active'}
16: {id: 2849, name: 'Gov. Bhargava Abbott', email: '[email protected]', gender: 'female', status: 'active'}
17: {id: 2848, name: 'Mr. Bela Adiga', email: '[email protected]', gender: 'female', status: 'inactive'}
18: {id: 2847, name: 'Aasa Chopra', email: '[email protected]', gender: 'female', status: 'active'}
19: {id: 2846, name: 'Chidambar Sethi MD', email: '[email protected]', 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