unable to set header in axios

Question

I am unable to set headers via axios e.g. content-type as application/json. There is no exception thrown by axios but the request gets a "415 Unsupported Media Type" response in browser. Any clues where I am erring?

Following is the code -

I tried 2 approaches.

Approach 1 -

import axios from 'axios';
axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.get(url).then(
  response => this.loadData(response)).catch(
  (error) => this.showError(error));

Approach 2 -

let config = {
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json"
    }
};
axios.get(url, config).then(
      response => this.loadData(response)).catch(
      (error) => this.showError(error));

there is no need to set content-type application/json, it will automatically set, another header Access-Control-Allow-Origin that need to allow access from your backend sever (express) not from your react app.try to remove both headers — Flexsin Tech
– Flexsin Tech, Commented Apr 11, 2018 at 9:35

Dez · Accepted Answer · 2018-04-11 10:28:54Z

4

You are getting that error because you are not setting the Accept header with the proper content type you expect the response from the server should be.

To avoid that, for example, you can create an instance of Axios (to later import it everywhere you do Axios calls in your React.js app) where you can set up the default headers of all the calls that you will do with Axios. For example:

import axios from 'axios';

const instance = axios.create({
  baseURL: [YOUR BASE URL],
  timeout: 5000,
  headers: {
    'Accept-Version': 1,
    'Accept': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json; charset=utf-8',
  },
});

export default instance;

Thus all the calls you do will have the proper headers and you won't have to worry about them being properly set. I also assume you are just going to work with json body requests and responses.

edited Apr 11, 2018 at 10:28

answered Apr 11, 2018 at 9:47

Dez

5,8878 gold badges47 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lassi Uosukainen Over a year ago

Is content-type needed here? To me the issue looks like using content-type instead of accept. Content-type shouldn't normally be used with get requests.

Dez Over a year ago

You are right that for GET requests Content-Type is not needed, but I was proposing a generic solution for all kind of requests so the OP doesn't need to worry about setting proper headers in all calls. The problem arising here indeed is about the lack of 'Accept' header so I will rewrite the answer to highlight it.

comiventor Over a year ago

@Dez for some reason, the web service I am hitting seems to be configured incorrectly. even in postman, only when I specify Content-Type in Get request that I get proper response else I get error. your above solution didn't help in setting the headers. in Browser, my request fails at the OPTIONS level itself.

Dez Over a year ago

If you are getting an OPTIONS request instead a GET one you are having problems with CORS.

comiventor Over a year ago

yes there was a CORS problem on the service I was hitting. But at the same time, creating axios instance was helpful. Thanks

Collectives™ on Stack Overflow

unable to set header in axios

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related