CODEWITHSUNDEEP
javascriptresthttpreactjsaxios
theJuls
theJuls

Reputation: 7460

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

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.

Upvotes: 24

Views: 131857

Answers (4)

Rizwan
Rizwan

Reputation: 4433

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");
});

read more >>

Upvotes: -1

Denis Mitrofanov
Denis Mitrofanov

Reputation: 5

In order to make axios include Content-Type: application-json you need to do that:

javascript
window.axios = require('axios')
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

Upvotes: -7

Ben Ahlander
Ben Ahlander

Reputation: 1333

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

Upvotes: 37

Daniel Cortes
Daniel Cortes

Reputation: 654

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.

Upvotes: 1

Related Questions