Why does the Authorization header token does not get displayed in my browser

Question

I want to create a login system. I have a Spring Boot Api with a JWT-Token for security written with this tutorial. On my Front-End I use React JS and Axios for requests.

This is my axios configuration:

import axios from 'axios';

const api = axios.create({
    baseURL:'http://localhost:8080',
    headers: {'Access-Control-Allow-Origin': '*'}
});

export default api;

And this is the login function:

loginClickHandler = () => {
        const data = {
            "username":this.state.username,
            "password":this.state.password
        };
        api.post("/login",data)
            .then(response => {
                console.log(response);
                if(response.data !== null) {
                    this.setState({
                        loggedIn:true,
                        userData:response.data
                    });
                }else{
                    this.showMessage(2,response.data.error)
                }
            })
            .catch(error => {
                this.showMessage(2,error);
            });
    };

The login function itself and everything else works fine, but I do not get the Authorization Token displayed in the browser as a header. This is the console.log(response) (only headers):

headers:
cache-control: "no-cache, no-store, max-age=0, must-revalidate"
content-length: "0"
expires: "0"
pragma: "no-cache"

However when I use Postman for the request, I get 14 headers and one of them is the Authorization header with the token in it as expected.

Now my question is, how I can get the header displayed in my browser so I can store it for later requests.

Thank you

EDIT:

I just found that the Authorization Header gets displayed in the Network tab of the browser but not in the response.

SOLUTION:

I had to add this line in my JWTAuthenticationFilter successfulAuthentication method:

res.addHeader("Access-Control-Expose-Headers",HEADER_STRING);

as @Jack Chen and @Sarthak Aggarwal suggested

The Access-Control-Allow-Origin header must be set on the server, not on the browser. — Guy Incognito, Jul 21 '20 at 07:18
Thank you for the input, but I don't think that this is related to the problem, since the request itself is working — Pumpanickel, Jul 21 '20 at 07:26

score 1 · Answer 1 · answered Jul 21 '20 at 07:48

You could not set header info in client request here:

import axios from 'axios';

const api = axios.create({
    baseURL:'http://localhost:8080',
    // pass 'Access-Control-Allow-Origin' is not working!
    headers: {'Access-Control-Allow-Origin': '*'}
});

export default api;

Because of CORS, you could not get the correct response before set this header in your server side. You can according to this guide to set header in your Spring Boot service.

Hope it will be helpful.

score 1 · Accepted Answer · answered Jul 21 '20 at 07:48

1

You might need to set The Access-Control-Expose-Headers header set on server as it lets a server whitelist headers that browsers are allowed to access.`

Syntax:

Access-Control-Expose-Headers: <header-name>[, <header-name>]*

answered Jul 21 '20 at 07:48

Sarthak Aggarwal

2,284
1
8
12

For more information, check out [this](https://stackoverflow.com/a/37931084) – Sarthak Aggarwal Jul 21 '20 at 07:49

I.sh. · Answer 3 · 2022-09-29T17:38:13.707

0

I had the same problem but using NodeJs & Express,
to solve the problem I had to add this expose header:

res.setHeader("Access-Control-Expose-Headers", "<YourHeaderName>");

(very similar to your solution)

More info about setHeader method: response.setHeader(name, value) (Added in v0.4.0) https://www.geeksforgeeks.org/node-js-response-setheader-method/

edited Sep 29 '22 at 17:38

answered Sep 29 '22 at 17:36

I.sh.

252
3
13

Why does the Authorization header token does not get displayed in my browser

3 Answers3