axios: I set withCredentials is true, but cross-site requests failed. I can't find why...

the cross-site url is can access directly, but I can’t get the data(dateType is json) through cross-site requests. Code:

const songList = axios.create({
  timeout: 10000,
  withCredentials: true,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'x-www-form-urlencoded',
  },
  params: {
      id: 37880978,
      updateTime: -1
    }
});
songList.get(API.playlistDetail)
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 22
  • Comments: 28 (2 by maintainers)

Most upvoted comments

I’m having the same issue … what I have found out is setting axios.defaults.withCredentials = true; and not using an instance at all solves the issue

i’ve been fiddling with persistent user sessions for a while and was having trouble stringing together passport / passport-local (for authentification), mongoose, express-session, and connect-mongo (for storing sessions in mongo).

@mshibl comment helped me get 1 step further, and setting these cors options for express finally had cookies being passed correctly. hopefully this helps someone else having a similar issue

app.use(cors({
  credentials: true,
  origin: "http://localhost:3000"
}));

My mistake, withCredentials set on the instance IS working for me. My issue was I wasn’t seeing the set-cookie header in the response in the network tab or in document.cookie, but it’s probably because I don’t have a good enough understanding of what Chrome lets you see from cross-origin cookies.

Going to chrome://settings/siteData let me search by the domain of the cookie, and I saw that it was being set correctly with:

axios.create({ withCredentials: true, })

and it wasn’t being set at all without, so it’s working for me in axios version 0.18.0

I’m having the same issue … what I have found out is setting axios.defaults.withCredentials = true; and not using an instance at all solves the issue

It helped.

Whilst the Setting of withCredentials is working(on both instantiated and directly created) , passing custom XSRF headers still is not:

axios.post('https://testtest.com/api/v1/entity/', e, {
    withCredentials: true,
    xsrfCookieName: 'csrftoken_testtest',
    xsrfHeaderName: 'X-CSRFToken',
})

includes all cookies, however does not extract and set the mentioned xsrfheader (even though the cookie is definitely present!) -

am I holding it wrong?

Just ran into this in my upgrade to 0.19.0-0.19.2 and specifying withCredentials on the global axios level before creating a session instance solved it for me.

axios.defaults.withCredentials = true

I was having all sorts of funky issues with set-cookie headers not working for my CSRF tokens.

set withCredentials whether use instance or axios.defaults works in 0.18.0 and 0.19.0. https://github.com/axios/axios/blob/841466416b6851666955113a60ae46830a27003f/test/specs/xsrf.spec.js#L70-L81

it’s not an issue with axios i just made it work on the latest version, I was using express cors so i simply added credentials: true, origin: http://yourdomain:3000. This won’t work on localhost you have to point your localhost into some fake domain and have all your apps run on that domain

@mshibl Thanks for your share

@mshibl’s solution worked for me. Setting the default and not relying on an instance was the trick ¯_(ツ)_/¯