Changing the Content-Type in axios header to fix a 415 error

Question

I am trying to send a file to my back-end through an axios post request.

This is the error I currently have:

cherrypy._cperror.HTTPError: (415, 'Expected an entity of content type application/json, text/javascript')

From what I have read I need to change the Content-Type in my post request, I looked around I am currently attempting to do so like this:

handleUploadButton(e){
            const upload_file = this.state.file;
            const formData = new FormData();
            formData.append('file', upload_file);
            const request = axios.post(someUrl, formData, {headers: {
                "Content-Type": "application/json"}
            })
                .then(function (response) {
                    console.log('successfully uploaded', upload_file);
                });
    }

Not sure if relevant, but all this is happening through a reactjs form. This is my current Content-Type: Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryBwjjjGuJEySeXdRU

I have no idea where to go from here. Any help would be greatly appreciated.

score 33 · Answer 1 · answered Oct 20 '17 at 18:43

33

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',
        }
    }
    )
}

answered Oct 20 '17 at 18:43

Ben Ahlander

1,113
11
12

8

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Baum mit Augen Oct 20 '17 at 23:46
1

I'm doing this, but for some reason is not replacing the default Content-Type... – Ari Waisberg Sep 09 '22 at 18:16

score 2 · Answer 2 · answered Sep 11 '17 at 20:10

This worked for me:

const formData = new FormData();
formData.append('data', new Blob([JSON.stringify(data)], { type: 'application/json'}));
formData.append('file', file);

return axios.put(`${url}`, formData)
  .then((response) => { console.log(response) })
  .catch((error) => { console.log(error) })

I took this from another answer of a similar issue. You can check the original answer here.

score 0 · Answer 3 · edited Oct 29 '21 at 16:03

0

You can fix different types catch() error by

.catch((error)=> {
  if (error.response){
    this.errors(error.response.message);
  } else if (error.request) {
    console.log('error.request');
  } else {
    console.log('Error', error);
  }
  console.log("rejected");
});

Changing the Content-Type in axios header to fix a 415 error

4 Answers4