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":"admin@bmw.com","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, Nov 03 '20 at 01:21

score 0 · Answer 1 · answered Nov 02 '20 at 20:36

0

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

answered Nov 02 '20 at 20:36

farvilain

2,326
1
10
23

Thank you!, I changed my set up to use a proxy in order to avoid CORS, I'm getting a lot more headers now. I still can't get the set-cookie so I think the problem is in the httpOnly as you pointed me. – Sebastian Ortega Nov 03 '20 at 15:09

score 0 · Answer 2 · answered Nov 03 '20 at 15:54

0

You can not read Set-Cookie header in JavaScript code, as mentioned in this mdn article.

answered Nov 03 '20 at 15:54

PKV

246
2
4

Thanks, It's working now, my mistake was that I was trying to read the cookie to store it with the setCookie method and this is done by the browser. – Sebastian Ortega Nov 03 '20 at 16:08

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

2 Answers2