reactjs axios 获取自定义请求 header
reactjs axios get request with custom header
我需要打这个电话
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 (http://127.0.0.1/myapi)
上调用 php api
解决方案
Axios 客户端发出 "ping" 请求以检查地址是否可达。
所以,第一次调用是在 OPTIONS 方法中,后面的调用是在 GET 中。
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);
});
查看 axios interceptors 以获得针对您在此处的内容的更通用的解决方案。它允许您在每次发出请求时 运行 一个函数,这意味着您可以将 headers 配置移动到一个全局函数中,该函数会被任何请求调用。
// 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);
});
来自 Mayank Shukla 的好建议,这是一个 CORS 问题,我从这个
修改了我的 web.config
<add name="Access-Control-Allow-Origin" value="*" />
至此
<add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
@Mauro Sala
您的 axios 请求是正确的。您需要在服务器端允许您的自定义 headers。
如果您的 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");
一旦您在服务器端允许您的自定义 headers,您的 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,调用失败,为什么?
编辑
我正在使用节点 (localhost:3000) 运行 reactjs 项目,我在 IIS (http://127.0.0.1/myapi)
上调用 php api解决方案
Axios 客户端发出 "ping" 请求以检查地址是否可达。 所以,第一次调用是在 OPTIONS 方法中,后面的调用是在 GET 中。
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);
});
查看 axios interceptors 以获得针对您在此处的内容的更通用的解决方案。它允许您在每次发出请求时 运行 一个函数,这意味着您可以将 headers 配置移动到一个全局函数中,该函数会被任何请求调用。
// 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);
});
来自 Mayank Shukla 的好建议,这是一个 CORS 问题,我从这个
修改了我的 web.config<add name="Access-Control-Allow-Origin" value="*" />
至此
<add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
@Mauro Sala 您的 axios 请求是正确的。您需要在服务器端允许您的自定义 headers。 如果您的 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");
一旦您在服务器端允许您的自定义 headers,您的 axios 请求将开始正常工作。