Axios doesn't send cookies with POST and data

[Xcelled]

Summary

I was beating my head off of the issue reported in #191 for awhile but then I noticed something. Post requests WITHOUT data work fine. Post requests WITH data seem to overwrite some config settings.

#### Context

Specifically for me, all my AJAX requests (which are CORS-protected) need a cookie to get past my authentication provider. Given that, I had set withCredentials to true in my axios instance. Everything was fine for GET and data-less POST requests. But as soon as I tried to post some data, I got hit with CORS errors again. Upon inspection, for some reason Axios stops sending the cookie header (and thus the auth token) when I specify data. The lack of the cookie means the server rejects the request (returning a 302 in my case) which the browser reports as a CORS failure, oddly enough.

I saw the message from @mike-robertson on #191 about using json.stringify. However, my data must be urlencoded. I used the query-string package to encode the parameters directly. It worked after that!

In summary, given:

import axios from 'axios';
import queryString from 'query-string';

const api = axios.create({
	withCredentials: true
});

params = {
   foo: 'bar',
   baz: 3
};

then the following will not send the cookie header.

api.post('bluh', params);

but these will:

api.post('bluh');
api.post('bluh', queryString.stringify(params));

This seems like a pretty major problem and should at least be mentioned in the docs.

• axios version: v0.16.1
• Environment: node v7.6.0 on KDE Neon
• Chrome info:

Google Chrome	58.0.3029.81 (Official Build) (64-bit)
Revision	ac0bae59f0aa5b391517e132bf172144b1939333-refs/branch-heads/3029@{#746}
OS	Linux
JavaScript	V8 5.8.283.32

[toyflish]

I had a similar issue, doing a a post-request same origin axios with default configuration sent the auth-cookie, same setup as cors from other domain axios did not send the auth-cookie until I set the configuration to axios.defaults.withCredentials = true.
Would be better to have same behaviour on both types of request.

[agourd]

I had a very similar issues, what I understood is that the OPTIONS request that is issued before the POST request (I was doing cross-site requests) does not carry the cookie header.

If your server does not authorize OPTIONS request to be unauthenticated then he rejects it and your browser thinks that Cross-origin is denied.

I changed my server configuration to authorize unauthenticated OPTIONS requests and it solved my problem.

[jaspersorrio]

I had the same problem with post not sending cookies!

I solved my problem by doing

axios("http://mysite.com/api/things/", {
  method: "post",
  data: someJsonData,
  withCredentials: true
})

[JakeElder]

For those finding this and still having trouble - my comment here may help

[phistuck]

@rubennorte - why is this closed?

[synfox]

Do we have a solution for this? As @Xcelled stated, axios is not sending cookie unless I do JSON.stringify? I do not want to do that.

[xgqfrms]

Axios & cookie & Fetch & Ajax

withCredentials: true / credentials: 'include',

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

https://stackoverflow.com/questions/43002444/make-axios-send-cookies-in-its-requests-automatically/43178070#43178070

https://stackoverflow.com/questions/40941118/axios-wont-send-cookie-ajax-xhrfields-does-just-fine/43676021#43676021

XMLHttpRequest

withCredentials

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);

xhr.withCredentials = true;

xhr.send(null);

https://www.axios.com/tracking-cookies-are-dead-9c316a2c-33c2-40b8-9801-069df07593a8.html

Fetch

credentials

fetch(url, {
  method: 'GET',
  credentials: 'include',
})
.then((res) => res.json())
.then((json) => {
    console.log(json);
})
.catch((err) => {
    console.log(err);
});

https://stackoverflow.com/questions/34558264/fetch-api-with-cookie

[stepli1010]

have the same problem with post not sending cookies! Try some solutions but still without work.

[quicken]

Just in case anyone else stumbles across this thread "googling" for a solution.

If you are wanting to pass a struct as a set of form fields like you might do in jQuery you would likely be trying something like this when using axios (this will not work and exhibits the behavior titling this issue):

config = {
    url:'http://somedomain',
    method:'post',
    withCredentials: true,
    data:{myfield:"myvalue"}
};

axios.request(config);

Instead of a struct pass a FormData object as follows:

formData = new FormData();
formData.append('myfield','myvalue');  

config = {
    url:'http://somedomain',  
    method:'post',
    withCredentials: true,
    data:formData  
};  
axios.request(config);  

Doing the above allowed me to post my form data cross origin while also ensuring cookies were being passed along for the ride.

NOTE : The server must also be responding with the following headers:

Access-Control-Allow-Credentials   true
Access-Control-Allow-Headers  X-PINGOTHER, Content-Type
Access-Control-Allow-Methods GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://localhost:3000 // WILD CARD WILL NOT WORK WHEN POSTING 

Hope this helps someone.

[jorgehaddadsonos]

Having the same issue. And can't have the pre-flight request be unauthenticated. The comment by @quicken is not a fix. Is there a status for this issue?

[hmate9]

@jorgehaddadsonos are you making a cross domain request? If so make you set your CORS correctly. @quicken's fix worked for me.

[KaplanAlex]

Sending a post request with the data field set to the stringified version of the body I want to send works! However, if I change the method to PUT for the same request (I created the PUT endpoint as well) I run into the same pre-flight request issue again. Any idea why a PUT request would be different that a POST?

[mskashef]

I had the same problem. this is what I did:

axios.get('url', {withCredentials: true});

And it solved my problem.
you have to set withCredentials option to true, then the axios will accept the sessions, cookies, etc.

[fabiel-leon]

solved withCredentials:true

axios({
  url:"http://example.com",
  method:"POST",
  data: qs.stringify(form), 
  withCredentials: true
});

axios version

{
"axios": "^0.19.2",
"axios-cookiejar-support": "^1.0.0",
"tough-cookie": "^4.0.0"
}

[jorgehaddadsonos]

It doesn't work with PUT. I believe we're just making the POST call simple.

…

On Fri, Apr 17, 2020 at 6:54 AM Fabiel Leon ***@***.***> wrote: solved withCredentials:true axios({ url:"http://example.com", mehtod:"POST", data: qs.stringify(form), withCredentials: true }); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#876 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIA3UITPMBP6HDVCTRE7X43RNBNQDANCNFSM4DJRV2FA> .