React Axios, Can't read the Set-Cookie header on axios response

Question

I can't read the set-cookie header on the response object in axios, I'm posting user/password to backend and the response has the authorization cookie in the Set-Cookie header, however I can't see it on the res.header object, nevertheless if I go chrome dev tools and open the network tab I can see the cookie on the response header.

Any clue?

My post: axios.post( endPointLogin, { email, password }, { withCredentials: true } )

The res object in console

the header on chrome dev tools with the set cookie header

export function login(email, password) {
  return http.post(
    endPointLogin,
    { email, password },
    { withCredentials: true }
  );
}

    const handleSignIn = async ( e ) => {
        e.preventDefault();
        const respuesta = await login( cuenta.email, cuenta.password );
        console.log( "res:", respuesta );
    };

Response:

config: {url: "http://localhost:3000/usuario/auth", method: "post", data: "{"email":"[email protected]","password":"admin"}", headers: {…}, transformRequest: Array(1), …}
data: "OK"
headers:
access-control-allow-credentials: "true"
access-control-allow-headers: "Origin, X-Requested-With, Content-Type, Accept"
access-control-allow-origin: "http://localhost:5000"
connection: "close"
content-length: "2"
content-type: "text/plain; charset=utf-8"
date: "Tue, 03 Nov 2020 15:00:46 GMT"
etag: "W/"2-nOO9QiTIwXgNtWtBJezz8kv3SLc""
vary: "Accept-Encoding"
x-powered-by: "Express"
__proto__: Object
request: XMLHttpRequest {__sentry_xhr__: {…}, readyState: 4, timeout: 0, withCredentials: true, onreadystatechange: ƒ, …}
status: 200
statusText: "OK"
__proto__: Object

**Response Header in google dev tools network tab **

access-control-allow-credentials: true
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept
access-control-allow-origin: http://localhost:5000
connection: close
content-length: 2
content-type: text/plain; charset=utf-8
date: Tue, 03 Nov 2020 15:00:46 GMT
etag: W/"2-nOO9QiTIwXgNtWtBJezz8kv3SLc"
set-cookie: jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbXByZXNhIjoiYm13IiwiZW1haWwiOiJhZG1pbkBibXcuY29tIiwic2VndXJpZGFkIjoiYWRtaW4iLCJpYXQiOjE2MDQ0MTU2NDZ9.CpIIScbZQCKsyxvc64CJ290fNCUlpKxZ5zBT3JK2tvc; Path=/
Vary: Accept-Encoding
X-Powered-By: Express

Hi, it will be very useful if you share with us the code that you are using, showing us how you are trying to access this header, a print or copy of your response and errors that you receive. — Diego Alberto Zapata Häntsch

farvilain farvilain · Accepted Answer · 2020-11-02T20:36:55

As you have CORS in this request, you must authorize headers to be read Also, cookie must be not 'httpOnly' but it seems to be the case More about CORS

React Axios, Can't read the Set-Cookie header on axios response

2 Answers