Why is Fetch API call not returning the response headers?

Question

I'm building a SignUp form and have the following API call to POST the form:

const request = new Request('http://localhost:4300/auth/', {
 method: 'POST',
 headers: new Headers({
   'Accept'       : 'application/json',
   'Content-Type' : 'application/json',
 }),
 body: JSON.stringify({ user: data })
});

fetch(request).then(response => {
    console.log(response);
    const auth = response.headers.get('Authorization');
    console.log(auth)
});

The problem is response.headers.get('Authorization') is returning as null. Even though if I look at Chrome's Network XHR request I see the Response Headers being sent by the API server.

Why is React not providing me with response.headers via the request above?

Thanks

sideshowbarker · Accepted Answer · 2021-09-10 10:50:05Z

10

The value of the Access-Control-Expose-Headers response header for the response from http://localhost:4300/auth/ must include "Authorization" if you want your requesting frontend JavaScript code to be allowed to access the Authorization response header value.

If the response includes no value for the Access-Control-Expose-Headers header, the only response headers browsers will let you access from client-side JavaScript in your web app are Cache-Control, Content-Language, Content-Type, Expires, Last-Modified and Pragma.

See https://fetch.spec.whatwg.org/#cors-safelisted-response-header-name for the spec.

edited Sep 10, 2021 at 10:50

answered Jul 2, 2017 at 2:06

sideshowbarker

89.3k30 gold badges220 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

AnnaSm Over a year ago

Thanks but not following... Are you saying I need to update the server or the client? I'm fairly certain it's the client that's the issue because the API endpoint is working with a different client library in the same way. I'm just trying to build the SignUp flow outside of the orig client library.

AnnaSm Over a year ago

For example, the client library works just fine, here's the source: github.com/timscott/react-devise/blob/master/src/actions/api.js

AnnaSm Over a year ago

Notice how tryLogin is able to get the response.headers --- github.com/timscott/react-devise/blob/master/src/actions/…

AnnaSm Over a year ago

I'm trying to build my own SignUp form outside of that library and while the API is responding the same, my client code isn't getting response.headers ... any ideas? Thanks

Cleiton Over a year ago

you must update your api endpoint or serve your client files from same port

|

Collectives™ on Stack Overflow

Why is Fetch API call not returning the response headers?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related