reactjs axios get request with custom header

Question

I need to do this call

axios.get("http://127.0.0.1/myapi/test.php").then((response) => {
})

If I do this call all is ok and HTTP method is GET, but if I change to this

var config = {
    headers: {"X-Id-Token": "abc123abc123"}
};
axios.get("http://127.0.0.1/myapi/test.php", config).then((response) => {
})

The HTTP method is OPTIONS and the call fails, why?

EDIT

I'm runnig reactjs project with node (localhost:3000) and I call php api on IIS (http://127.0.0.1/myapi)

SOLUTION

Axios client makes a "ping" request for to check if address is reachable. So, the first call is in OPTIONS method, later calls are in GET.

Solution 1

good suggestion from Mayank Shukla, it's a CORS problem, I modified my web.config from this

<add name="Access-Control-Allow-Origin" value="*" />

to this

<add name="Access-Control-Allow-Origin" value="http://localhost:3000" />

Solution 2

axios({
    url: 'http://127.0.0.1/myapi/test.php',
    method: 'get',
    headers: {
        'X-Id-Token': 'abc123abc123',
        'Content-Type': 'application/json'
    }
 })
 .then(response => {
    console.log(response)
 }) 
 .catch(err => {
    console.log(err);
 });