Custom header not being sent during OPTIONS request.

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

[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.

[SmirnovM91]

I have the same problem, any solutions?