Custom header not being sent during OPTIONS request.

[ChunAllen]

Describe the issue

Axios not sending custom header during OPTIONS request.

I use axios 0.18.0 in my Vue.js application that is running in e.g. cms.abc.com. and the server is running on APIGee with url server.abc.com.
When I check the logs from APIGee I'm not receiving the value of x-api-key on OPTIONS request.

Example Code

 const headers = {
      'X-API-Key': '123123x123123'
    }

    return axios({
      method: 'get',
      url: 'https://server.abc.com/content/v1/deals',
      headers: headers
    }).then(response => {
      console.log(response.data)
      return response.data;
    })

Expected behavior, if applicable

I'm expecting that axios is also sending the x-api-key during OPTIONS request. It only sends during GET request. Not sure if browsers really not sending custom headers during pre-flight request.

Environment

• Axios Version 0.18.0
• Adapter HTTP
• Browser Chrome
• Browser Version: Version 87.0.4280.88
• Node.js Version: 12.7.0
• OS: OSX 11.0.1
• Additional Library Versions Nuxt 2.13.3

Additional context/Screenshots

[lopezdp]

I am having the same problem. Im about to try it using something like this:

hdr ={
    Authorization: "my_x_api_key_here"
}

Ill let you know if it works...

[SmirnovM91]

I have the same problem, any solutions?

[eirenik0]

No, any solution yet?

[knksmith57]

Unfortunately this isn't something axios can fix —at least not in this case.

In browser environments, CORS-preflight requests are initiated and entirely managed by the user agent; the preflight operations are completely opaque to our userland code and axios has no ability to add additional headers to the outgoing OPTIONS request (because it isn't making it).

If you're fortunate enough to control the backend (APIGee server at server.abc.com in this case), the solution is to update the server code to correctly handle CORS-preflight requests; I recommend this great explainer from MDN as a starting point.

[Therealskythe]

Solution: if you got access to the backend (you're using AWS API Gateway for example), you can disable authorization for OPTIONS requests. I am no security expert and don't know if that creates possible risks, but this suggestion came from AWS support center itself so take that however you will.

According to Stackoverflow there is no way to send custom headers during preflight in browsers:

This is by design; the purpose of the preflight request is to determine what information the useragent (browser) is permitted to send beyond the "simple" stuff defined in the CORS spec. Thus, for the useragent to send any non-simple data (such as your custom header) as part of the preflight request is self-defeating.

But in the very next sentence the author gives the impression that there is a way to make it work even in browsers by using Access-Control-Allow-Headers but I could not get it to work.

The confusing (and stupid) thing here is, that this only applies to the browser. Postman or Axios from the terminal are apparently not affected.