Axios doesn't add Content-Type to the request

See original GitHub issue

I’ve got configured : axios.defaults.baseURL = 'http://localhost:8080/'; axios.defaults.headers.common['Content-type'] = "application/json"; axios.get('something/something1', { headers: { "Content-Type": "application/json" } }).then(response => console.log(response));

This unfortunately this doesn’t add Content-Type in the header of the request.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:7
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
ahlescommented, Mar 13, 2017

If I visit the axios code I find this section:

// Add headers to the request
if ('setRequestHeader' in request) {
  utils.forEach(requestHeaders, function setRequestHeader(val, key) {
    if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
      // Remove Content-Type if data is undefined
      delete requestHeaders[key];
    } else {
      // Otherwise add header to the request
      request.setRequestHeader(key, val);
    }
  });
}

If there’s no requestData, then the “Content-Type” header is removed. The “Content-Type” header is for setting the requestData type. So if there’s no request data, the ‘Content-Type’ header gets removed.

And I found a section in the docs about requestData:

// `data` is the data to be sent as the request body
// Only applicable for request methods 'PUT', 'POST', and 'PATCH'
// When no `transformRequest` is set, must be of one of the following types:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream
data: {
  firstName: 'Fred'
},

So you can’t set data for a GET request, and at the same time the “Content-Type” header for a request without data gets ignored.

One can’t set a “Content-Type” header for a GET request in Axios. And that’s probably correct behaviour. (I’m only user)

If you want to send data to the server, you should use PUT or POST.

https://en.wikipedia.org/wiki/List_of_HTTP_header_fields#Request_fields

Content-Type: The MIME type of the body of the request (used with POST and PUT requests)

If you want the server to respond with “application/json”, you would need "Accept": "application/json", which is already set by Axios I think.

6reactions
concubicyclecommented, May 24, 2017

I am doing a post, settings data to an object (verified non-null), and trying to set Content-Type, and it still isn’t working:

	var axiosObj = {
			method: this.method,
			params: queryParams,
			data: bodyParams,
			url: this._getUrl(params),
			headers:{
				'Content-Type': 'application/json'				
			}
		};
		
		return axios(axiosObj)

If I comment out “params: queryParams”, it works. That should be… my code decides which params to send how during runtime.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Axios not respecting Content-Type header - Stack Overflow
As you can see, for post and get utility methods I use a request interceptor that sets the default values. Thus I use...
Read more >
Axios content-type header : r/vuejs - Reddit
I continue to be unable to send PUT or POST requests that omit 'application/x-www-form-urlencoded' from the Content-Type header.
Read more >
TIL: Why does Axios is ignoring Content-Type header? | Nesin.io
If the payload is empty. Then axios explictly ignores the 'Content-Type' even if we set it while making the request or an interceptor/default....
Read more >
How to make HTTP requests with Axios - LogRocket Blog
Making an HTTP request is as easy as passing a config object to the Axios function. You can make a POST request using...
Read more >
Send a File With Axios in Node.js - Maxim Orlov
Create a form with the form-data library; Grab the Content-Type header with the form's boundary with form.getHeaders() and assign it to the axios...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found