reactjs axios获取自定义标头的请求

时间:2017-06-30 14:36:52

标签: javascript ajax reactjs axios

我需要做这个电话

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,调用失败,为什么?

修改

我是runnig reactjs项目与节点(localhost:3000),我在IIS上调用php api(http://127.0.0.1/myapi

Axios客户端进行" ping"要求检查地址是否可达。 因此,第一个调用是在OPTIONS方法中,后面的调用是在GET中。

4 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

到这个

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

答案 3 :(得分:-1)

@毛罗·萨拉 您的axios请求是正确的。您需要在服务器端允许自定义标头。 如果您的api中包含php,那么此代码将为您工作。

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请求将开始正常工作。