axios: Setting header: 'Content-Type': 'application/json' is not working

Yep, I can confirm. If there is no data passed it removes the Content-Type… I just added data: {} to my GET request, and it works fine. It’s really weird to pass data on get requests but I don’t mind 👍

If a user of this package wants to set a Content-Type header without a body, shouldn’t they be able to do that? I don’t see the argument for limiting the use here by either forcing a dummy payload or preventing the Content-Type header from being set. This choice should be up to the user unless there is a good reason to prevent it.

SignIn = () => {
    console.log('login clicked')
    let data = JSON.stringify({
        password: this.state.password,
        username: this.state.email
    })

    axios.post('url', data, {
        headers: {
            'Content-Type': 'application/json',
        }
    }
    )
}

Just for other people Googling, this is how I had to format my axios.post request

    var postData = {
      email: "test@test.com",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

This stills an issue. You need to specify the data:null or data:{} to get it to work 😃

Is there a particular reason to remove content-type in this line if data is not provided? https://github.com/axios/axios/blob/master/lib/adapters/xhr.js#L135 Why my get request can’t have content-type: application/json? This is super strange to write everywhere

await axios.get(url, {data: null})

const config = {
  headers: {
    accept: 'application/json',
  },
  data: {},
};

Same issue successfully fixed with data: {}. I hope, it will work ‘from the box’ soon.

Please reopen this ticket. This is still an issue for me too.

Currently performing a PUT with file and Content-Type header.
Content-Type header is lost, unless I add data:{} to the config. But then the file get lost if I do that.

@SirSerje While it is probably a good idea to set a default Accept header, I just want to point out that the Accept header isn’t the same as Content-Type. The Content-Type tells your server the format you, as the client, are sending the server. Accept tells your server the format in which you, as the client, want response data.

This bears repeating: if you’re here and you want Content-Type to always be set because you’re using it on the server side to figure out which format to send data back, then that’s incorrect; you want to be using Accept instead. See this SO question.

@teleyinex Content-Type describes what format the request data is in. If there is no request data, there is no need to specify the Content-Type. So you can correct me if I’m wrong but I believe the present behavior makes sense, aside from the fact that it should still not add the header if data is null. What do you think?

Yeah, agreed about that, it’s definitely something worth documenting.

One example in the README will do the trick 😄

@ziaulrehman40 @alejandronanez It seems you guys are using Rails and expect Rails to respond with JSON. The problem is that you’re setting the wrong HTTP header to accept JSON as a response. The header you should set is Accept:

axios.get('my/url', {
    headers: {
        'Content-Type': 'application/json',
         Accept: 'application/json'
    }
})

This is still an issue. I have to do this if I want the content type to be application/json

axios.post(url, myData, {
            data: null,
            headers: {
                'Content-Type': 'application/json'
            }
})