vue.js and axios using but unable to receive set-cookie in response.headers

Question

I tried to call external api from Vue js coreui theme but unable receive set-cookie in response.headers

Code is as below

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  axios.defaults.headers.common['Access-Control-Allow-Credentials'] = true;
  axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000';
  axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'X-PINGOTHER, Content-Type';
  axios.defaults.headers.common['Access-Control-Expose-Headers'] = 'Access-Token, Uid';
  axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS';
    axios
    .post('url', 
    {
        par : '20'
    }, {
        withCredentials: true,
        })
    .then(function(response){
      console.log(response);
    })
    .catch(error => console.log(error))

I tried to use both

axios.defaults.headers.common['Access-Control-Expose-Headers'] = 'Access-Token, Uid';

this and

withCredentials: true,

Response is coming correct but headers not coming different

response.headers in console

in developer tools as bellow: developer tools response header

Note: On Postman I get the set-cookie but on application in response not getting.

I tried each and everything related Axios and Vue js but still not getting set-cookies in headers.

The `Access-Control-` headers are *response* headers; they have to be set on the *server*. I'd recommend reading e.g. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — jonrsharpe, Feb 28 '20 at 10:26
I gone through this link on server we have set the response headers therefore its coming in postman but not in application. that is my problem. — DheveloperDhapare, Feb 28 '20 at 10:33

BadPiggie · Accepted Answer · 2020-02-28T17:24:08.460

1

Actually you are confusing the request & response together. As @jonrsharpe said in comment section, The headers start with the prefix Access-Control- are Response Headers, Which means it should be sent by the server to browser in response. But here you are sending it to server from client.

You should enable it in your server side application. Not in client side.

Refer this, Set-Cookie not working in browser but works with Postman

edited Feb 28 '20 at 17:24

answered Feb 28 '20 at 10:35

BadPiggie

5,471
1
14
28

withCredentials: true, this line I written for response header. If it is not correct then please let me know the correct way. because while calling api in postman I am getting the set-cookie header in response header but while calling through axios I am not getting set-cookie header in response.headers – DheveloperDhapare Feb 28 '20 at 11:39
You should enable CORS requests, Please note CORS are only for browser not for API clients. So it will work on postman But will not work in browsers. https://stackoverflow.com/questions/44849628/set-cookie-not-working-in-browser-but-works-with-postman – BadPiggie Feb 28 '20 at 17:23
I did a change on server side that I add the header as Access-Control-Expose-Headers and it give me each header. – DheveloperDhapare Mar 21 '20 at 04:08

vue.js and axios using but unable to receive set-cookie in response.headers

1 Answers1