Content-Type application/x-www-form-urlencoded

[alborozd]

Try to send request with content type application/x-www-form-urlencoded

var data = Querystring.stringify({ 
                "grant_type": "password",
                "username": login,
                "password": password
            });
axios.post(Urls.login, data);

but there is no such header in request.

I tried to use code:

  var data = Querystring.stringify({ 
                "grant_type": "password",
                "username": login,
                "password": password
            });
        return axios({
            method: 'post',
            url: Urls.login,
            data: data,
            headers: {
                'Content-type': 'application/x-www-form-urlencoded'
            }
        });

same problem

jquery code works fine:

$.ajax({
            url: Urls.login,
            data: data,
            type: "POST",
            headers: {
                'Content-type': 'application/x-www-form-urlencoded'
            }
        });

How can I use axios to send request with this header?

[mzabriskie]

That should work as you've shown. Sounds like a bug. I will look into it.

[alborozd]

The cause is interceptors. I can't send request with that Content-Type only when I use interceptors.

Here is my code:

axios.interceptors.request.use(function (config) {
        var token = LoginStore.getJwt();
        if (token) {
            config.headers["Authorization"] = "Bearer " + token;
        }

            return config;
        }, function (error) {    
            return Promise.reject(error);
        });

Inside interceptor I can see 'Content-Type' header, but it is not sent to the server.
Do I correctly use interceptors?

[rahuljiresal]

Any updates on this? I have the same issue. Axios doesn't send the header I set.

[rahuljiresal]

This seems to be the culprit line → https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L117

Any idea why the Content-Type header is removed before the request is sent?

A workaround option is to change your data to data || {} when you're making an axios request. This will make sure data is not undefined.

[mzabriskie]

It looks like the logic for removing Content-Type when requestData is undefined came in this commit 9096d34. There is no indication why it was added however.

I would vote if the requestData is undefined and method is PUT, POST or PATCH and no Content-Type has been set, then default Content-Type to application/x-www-form-urlencoded. Otherwise just honor whatever has been specified.

[nickuraltsev]

@mzabriskie But in the code snippet provided by @alborozd, the data is set to Querystring.stringify({...}), so requestData should not be undefined, right?

[alborozd]

@mzabriskie I think you're right. When I use request interceptor fiddler shows that data is empty. Without interceptor I can see data and header and it works fine.

So, probably the problem occurs when you work with interceptors.

[damianprzygodzki]

No interceptor is needed to crash this thing. I've set content type header defaults axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';, and i can't send any payload in POST body.

I've used workaround with URLSearchParams:

    var params = new URLSearchParams();
    params.append('email', email);
    return (dispatch) => {
        axios.post('/stack/' + uri, params)

But this is not supported by Safari and IE.

Edit: Okay :) Next update on workaround. Full supported workaround is send data as query string.
data: "flashcard=" + JSON.stringify(flashcard) + "&stackUri=" + stackUri. It hurts, but it works 👍

[nickuraltsev]

You can use a library like qs instead:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

[alborozd]

this is not a solution. What is difference if I will use "Querystring" or "qs" ? The problem is the header ['Content-Type'] = 'application/x-www-form-urlencoded' is empty because of interceptors.

[damianprzygodzki]

Any updates here? Because i've lost 1h today on researching why my POSTs are not affecting API (til i reminded about that issue)... Or there are no plans to fix that and it's better to go somewhere else?

[Dunkat]

I have the same problem... still waiting for fix...

[cadavre]

Please reopen @nickuraltsev as this is not fixed by your solution.

+1 for issue.

[hyanmandian]

I use a interceptor with qs library to solve this problem. Works fine for me.

import qs from 'qs';

axios.interceptors.request.use((request) => {
  if (request.data && request.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      request.data = qs.stringify(request.data);
  }
  return request;
});

[brickgale]

+1 for issue.

[damianprzygodzki]

hyanmandian commented 14 hours ago
I use a interceptor with qs library to solve this problem. Works fine for me.

Great, but it is not a way to solve issue in libraries IMHO by installing another.

[reznord]

You can just add a data: {} to the config, so the interceptor doesn't skip the headers which we specify.

This is what I did, and it worked for me:

import request from 'axios'

export const playSound = (soundFile) => (dispatch) => {
	dispatch(playSoundPending());
	return request
    .get(`/play/audio/${soundFile}`, { headers: {'Content-Type': 'audio/x-wav'}, data: {} })
    .then(response => response.data)
    });
};

This changed the Content-Type from application/json to audio/x-wav for me in the request headers in the network tab.

[sandervspl]

Has this been fixed yet? I can't seem to set my Content-Type with any of the solutions posted here.

[szare]

I have same problem, any help?

[szare]

I solved the problem using encodeURIComponent:

static getToken(username, password) {
return axios({
method: 'post',
url: 'endpoints',
data: Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

[joshlangner]

bump. One would definitely assume that if one sets defaults, they would be always be respected. Axios is definitely ignoring the defaults in certain contexts, causing issues for poor folks.

[joshlangner]

Here's a more specific merge where this happened: https://github.com/mzabriskie/axios/pull/195/files

[polyakoff]

+1 for this issue.
Spent over 3 hours trying to figure out what's wrong with my Tomcat config and apparently appears my headers were stolen on the way to the server. Workarounds did not help. God save the headers!

[usopan]

@polyakoff how did you solve for this?or are you still stuck. What I have observed is that this issue happens intermittently

[polyakoff]

@usopan Still stuck.

[usopan]

I moved to isomorphic-fetch for this particular request as a workaround.
Things seem to work OK on most browsers, but still not working on certain Safari versions.
I am begining to think that Safari is screwing me.

[Felomeng]

Got the same issue. And if I set the key to anything else, it works, except for "Content-Type"! Please help!

[perry-mitchell]

I've actually had to create yet another messy hybrid app by using fetch in browsers and axios in node and within react-native. Seems funny that it's like this and not the other way around. Really hoping to see this tackled soon so I can remove my monkey-patch.

I think it's important to realise that this is definitely not only an issue with querystring.. My body content is just raw text with no parameters, yet I can't send it using axios with a Content-Type.

[Felomeng]

I tried using post, it works fine, default of post is json

[StriderHND]

I'm experiencing this bug right now... so there Is no solution for this after years? wow...

[laurenz-glueck]

I created a PR that would fix the problem over two months ago... I don’t understand why it not get merged?!

[jovanmaric]

I created a PR that would fix the problem over two months ago... I don’t understand why it not get merged?!

Keep in mind that no one has pushed anything since september last year, maybe they're searching for maintainers?. Also, I think you missed a test when I compare your PR with: https://github.com/axios/axios/pull/1544/files

@mzabriskie could you maybe take the responsibility to merge one of these PR's? As currently some software requires get requests to have a content-type set (RoR params for instance: https://guides.rubyonrails.org/api_app.html#using-actiondispatch-request). The solution specified in #362 (comment) seems like the proper way to go and it would most of all solve all the desperate hacks like using fetch for this specific use case.

[rodrigogs]

I moved to got pagkage, since axios seems abandoned.

[bertolo1988]

So Axios is officially unable to send requests with 'Content-Type': 'application/x-www-form-urlencoded' or does @ChBernat solution actually work?

[funkindy]

Is there any workaround on this issue atm?

[ghost]

Is there any workaround on this issue atm?

Lookup a year up here and you will see plenty of workarounds... Though I would recommend, like others and myself included, move on from axios. It's abandoned...

[justintime4tea]

Wow... they should just abandon the project at this point, I know I am. Almost 3 years since issue originally reported and now we're still trying to solve this thing? Unbelievable. I love open source so I'm not harboring any ill feelings for this project not have maintainers but... it's used by TONS of people so the least you could do is abandon it so we all know this project is dead/dying. Thanks.

[kslr]

@justintime4tea Do you have a new recommendation?

got

[justintime4tea]

@kslr got or request seems like what everyone else has started migrating too. I'm trying to stick with Axios but I think it'll end up just coming down to me writing some abstraction layer over it so I can swap out the underlying HTTP request library and then if I use a different library which has a "built-in" HTTP client it uses, just let it do its thing.

[RocaManuel]

I tried something like this and worked for me.
Maybe not the best solution but it can really help (i think), any suggestion, if this solution is horrible, is welcome.

const foo= yield qs.stringify({ 'grant_type' : 'yourGrantType', 'param' : param, 'param' : param }) const bar= yield axios.post('/baz', foo)

I have removed the header, and it seems like it has received well.

[javaLuo]

axios({
  url,
  method: 'POST',
  headers:{
    'Content-Type': 'application/json'
  },
  data: null, // important
})

[leonardocouy]

I had two problems using RoR as backend.

My context:

I had a project using deprecated vue-resource and everything works ok without additional config. And now, I'm organizing the project's dependencies and replacing deprecated dependencies, so I replaced vue-resource with axios ;)...

---

But, we had some problems and below I will share what I do to solve these problems. Maybe help someone! So sorry if I haven't helped you as you expected

First problem, the problem is the same as this issue, I solved using:

axios.interceptors.request.use(config => {
  config.paramsSerializer = params => qs.stringify(params);
  return config;
});

Now, params like:

q: {
  search: "Something",
  sort: "asc",
}

will be transformed to:
http://xxxx/?q%5Bsearch%5D=something&q%5Bsort%5D=asc

this parsed will be:

q[search]: something
q[sort]: asc

Second problem, RoR is returning HTML response instead of JSON response:

This problem occurs because our backend must distinguish AJAX requests from other types of requests.

By default, vue-resource already set X-Requested-With header as expected. But, axios not. So, I had to define this key in the request header. My Axios global config was as follows in the end:

axios.interceptors.request.use(config => {
  config.paramsSerializer = params => qs.stringify(params);
  return config;
});
axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

===

If you use Rails as backend and no one of the solutions worked for you, let me know, maybe I help you =).

[carlosen14]

use this.. https://gist.github.com/akexorcist/ea93ee47d39cf94e77802bc39c46589b#gistcomment-2878451

[manishn2184]

Am working on react-native and getting bad request 400 error when use this :
import * as qs from 'querystring';
axios.post(url,qs.stringify({
'first_name': 'deep',
'last_name': 'palotra',
}),{
headers : {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then((response)=>{
console.log('worked')
}).catch((error)=>{
console.log('error')
console.log(error)
})

[javaxiaoyetan]

so，how to resolve this problem?

[e3bmo3ty]

any solution :(

[e3bmo3ty]

Solved By qs

{ data: qs.stringify(bodyObject) }

[chinesedfan]

Sad to see that so many people are confused in this issue. I have try my best to read those comments. But it seems to have involved many other problems.

Everyone, forgive me to close it. If someone can open a new issue to describe the problem clearly, that will be really big thanks to you.

[tapaz1]

Hey everyone,

I thought I'd chime in as I wasted almost a full working day of my life trying to solve this. This may help some partially, or completely so here's to hoping this is useful.

My reply stems from seeing various reasons why a POST was failing with Axios ranging from:

1. 400 Bad Request
2. Can't post with custom Headers (like this thread)
3. Need to serialize/stringify the data/payload

I was facing the same issue as everyone in this thread with the Bad Request 400 when passing in custom headers to Axios in the config like this, and tried many of the responses here, like using qs.stringify(), setting data in the config to null or {} to no avail.

1. Note - Adding the .catch() block and logging the error like so really helped me because I was able to surface an error that wasn't so cryptic. I was able to use the message to debug and ultimately figure out the issue I was having.

2. It's important in the .then() block to return response.data, otherwise you'll run into this error:

Converting circular structure to JSON

Now my issue was the api POST body was not what the endpoint wanted, but I couldn't see it until I was able to log the error.

Further, I'm also using NestJS and the HttpService, which is a wrapper around Axios, and that further complicated the issue because the real error wasn't bubbling up in the catchError callback in my pipe.

So here is the solution for both pure Axios and NestJS.

Axios:

const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
return axios.post('https://some-made-up-endpoint, dataString, { headers })
.then(resp => resp.data)
.catch(error => {
this.logger.log('ERROR: ${JSON.stringify(error.response.data)}');
});

NestJS:

const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
return this.http.post('https://some-made-up-endpoint, dataString, { headers }).pipe(
map(response => response.data), // This is important otherwise - circular JSON error
catchError((error: any) => {
this.logger.error('[[[[ ERROR TRYING TO FETCH TOKEN: ${error.message} ]]]]');
return of()
})
).toPromise();

TLDR;

1. Add the .catch() block to properly log the real error, otherwise it's 400 Bad Request
2. Make sure your data signature matches what the API is expecting. This is part of the reason an error exists since a code 400 is a 'Bad Request'
3. Return the response.data in the .then() block if you're using Axios, or in a map operator if you're using NestJS or you'll get the Converting circular JSON error

Sorry for the long post and good luck everyone!

Cheers

[powehuda]

Am working on react-native and getting bad request 400 error when use this :
import * as qs from 'querystring';
axios.post(url,qs.stringify({
'first_name': 'deep',
'last_name': 'palotra',
}),{
headers : {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then((response)=>{
console.log('worked')
}).catch((error)=>{
console.log('error')
console.log(error)
})

this work for me. with query stringfy thanks a lot.
you save my live

[jerrychong25]

You can use a library like qs instead:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

Your solution is working. Thanks a lot!