Javascript 带有自定义标头的reactjs axios get请求

我需要打这个电话

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

若我做这个调用，一切都正常，HTTP方法是GET，但若我改成这个

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

HTTP方法是OPTIONS，调用失败，为什么

编辑

我正在运行带有节点（localhost:3000）的reactjs项目，并在IIS（）上调用PHPAPI

解决方案

Axios客户端对发出“ping”请求以检查地址是否可访问。 因此，第一个调用是在OPTIONS方法中，后面的调用是在GET中。

请查看这里提供的更通用的解决方案。它允许您在每次发出请求时运行一个函数，这意味着您可以将headers配置移动到一个全局函数中，该函数可以为任何请求调用

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

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

来自的好建议，这是一个CORS问题，我修改了我的web.config

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

对此

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

@Mauro Sala 您的axios请求是正确的。您需要在服务器端允许自定义头。 如果您有php中的api，那么此代码将适用于您

header("Access-Control-Allow-Origin: *");   
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD");
header("Access-Control-Allow-Headers: Content-Type, X-Id-Token");

---

一旦您允许在服务器端使用自定义头，您的axios请求将开始正常工作。

这似乎是一个持续存在的问题。。。您收到的请求似乎很好，同样的方式对我也适用，您是否收到任何错误不确定，但我认为这是cors问题，请检查以下问题的答案：在my web.config IIS中，我已设置了此选项，我猜您发送的标题键“X-Id-Token”有问题。API可能需要其他密钥名而不是“X-Id-Token”。尝试使用“token”或authorization:

Bearer${token}

。不，我尝试发送头密钥“pippo”，但问题是相同的