"axios.defaults.headers.common['Content-Type'] = 'application/json'" but axios.post still is "application/x-www-form-urlencoded"

I set axios common header Content-Type = application/json by below code:

axios.defaults.headers.common['Content-Type'] = 'application/json';

But when I tried to use axios.post('apiurl', json), browser Content-Type still is application/x-www-form-urlencoded

enter image description here

I tried to use axios.post('Get_Office_PO_NO_Data', json, { headers: { 'content-type': 'application/json' } }) and axios can request application/json content type

enter image description here


Solution 1:

Per the documentation, you want post, not common:

axios.defaults.headers.post['Content-Type'] = 'application/json';
// −−−−−−−−−−−−−−−−−−−−^^^^

Which makes sense; other request types (GET, DELETE, etc.) don't have any request body to apply the content type to. (PUT and PATCH do, but I guess they figured it was unlikely you'd want to set the same default content type for POST and PUT, or it was just the whim of the developer.)

(Alternatively you might consider creating an instance with your defaults via axios.create, and then using the instance. Changing global defaults always makes me a bit uneasy. :-) )