使用 axios POST 请求传递标头
Posted
技术标签:
【中文标题】使用 axios POST 请求传递标头【英文标题】:Passing headers with axios POST request 【发布时间】:2017-11-20 22:01:55 【问题描述】:我已经按照 npm 包文档中的建议编写了一个 Axios POST 请求,例如:
var data =
'key1': 'val1',
'key2': 'val2'
axios.post(Helper.getUserAPI(), data)
.then((response) =>
dispatch(type: FOUND_USER, data: response.data[0])
)
.catch((error) =>
dispatch(type: ERROR_FINDING_USER)
)
它可以工作,但现在我修改了我的后端 API 以接受标头。
内容类型:'application/json'
授权:'JWT fefege...'
现在,这个请求在 Postman 上运行良好,但在编写 axios 调用时,我遵循 this link 并不能完全让它工作。
我经常收到400 BAD Request
错误。
这是我修改后的请求:
axios.post(Helper.getUserAPI(),
headers:
'Content-Type': 'application/json',
'Authorization': 'JWT fefege...'
,
data
)
.then((response) =>
dispatch(type: FOUND_USER, data: response.data[0])
)
.catch((error) =>
dispatch(type: ERROR_FINDING_USER)
)
【问题讨论】:
【参考方案1】:使用 Axios 时,为了传递自定义标头,提供一个包含标头的对象作为最后一个参数
修改您的 Axios 请求,如:
const headers =
'Content-Type': 'application/json',
'Authorization': 'JWT fefege...'
axios.post(Helper.getUserAPI(), data,
headers: headers
)
.then((response) =>
dispatch(
type: FOUND_USER,
data: response.data[0]
)
)
.catch((error) =>
dispatch(
type: ERROR_FINDING_USER
)
)
【讨论】:
@KishoreJethava, 500 是内部服务器错误,您能否在服务器端检查是否有标头出现或是否有其他错误 @KishoreJethava,你能在你的服务器中记录标题,看看你是否得到了正确的值 您不需要发布任何数据吗?还要确保 this.state.token 包含一个值 让我们continue this discussion in chat。 @ShubhamKhatri,我可以请您在这里查看axios
相关问题:***.com/questions/59470085/… 吗?【参考方案2】:
这是一个带有自定义标头的 axios.post
请求的完整示例
var postData =
email: "test@test.com",
password: "password"
;
let axiosConfig =
headers:
'Content-Type': 'application/json;charset=UTF-8',
"Access-Control-Allow-Origin": "*",
;
axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
.then((res) =>
console.log("RESPONSE RECEIVED: ", res);
)
.catch((err) =>
console.log("AXIOS ERROR: ", err);
)
【讨论】:
在获取请求时面临此问题。响应以 xml 格式出现。这并不能解决问题。 为此您需要添加headers: 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json"
请注意,这仅在您的api支持json响应时才有效【参考方案3】:
Shubham 的answer 对我不起作用。
当您使用 Axios 库并传递自定义标头时,您需要将标头构造为键名为“headers”的对象。 'headers' 键应该包含一个对象,这里是Content-Type
和Authorization
。
下面的例子运行良好。
var headers =
'Content-Type': 'application/json',
'Authorization': 'JWT fefege...'
axios.post(Helper.getUserAPI(), data, "headers" : headers)
.then((response) =>
dispatch(type: FOUND_USER, data: response.data[0])
)
.catch((error) =>
dispatch(type: ERROR_FINDING_USER)
)
【讨论】:
【参考方案4】:如果您使用 vuejs 原型中的某些属性在创建时无法读取,您还可以定义标题并写入即
storePropertyMaxSpeed()
axios
.post(
"api/property",
property_name: "max_speed",
property_amount: this.newPropertyMaxSpeed,
,
headers:
"Content-Type": "application/json",
Authorization: "Bearer " + this.$gate.token(),
,
)
.then(() =>
//this below peace of code isn't important
Event.$emit("dbPropertyChanged");
$("#addPropertyMaxSpeedModal").modal("hide");
Swal.fire(
position: "center",
type: "success",
title: "Nova brzina unešena u bazu",
showConfirmButton: false,
timer: 1500,
);
)
.catch(() =>
Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
);
;
【讨论】:
【参考方案5】:const data =
email: "me@me.com",
username: "me"
;
const options =
headers:
'Content-Type': 'application/json',
;
axios.post('http://path', data, options)
.then((res) =>
console.log("RESPONSE ==== : ", res);
)
.catch((err) =>
console.log("ERROR: ====", err);
)
所有高于 400 的状态码都会被 Axios 的 catch 块捕获。
另外,Axios 中的 post 方法的 header 是可选的
【讨论】:
【参考方案6】:您也可以使用拦截器来传递标头
它可以为您节省大量代码
axios.interceptors.request.use(config =>
if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
config.headers['Content-Type'] = 'application/json;charset=utf-8';
const accessToken = AuthService.getAccessToken();
if (accessToken) config.headers.Authorization = 'Bearer ' + accessToken;
return config;
);
【讨论】:
我建议使用config.method.toUpperCase()
不幸的是,我的较低【参考方案7】:
我们可以将标头作为参数传递,
onClickHandler = () =>
const data = new FormData();
for (var x = 0; x < this.state.selectedFile.length; x++)
data.append("file", this.state.selectedFile[x]);
const options =
headers:
"Content-Type": "application/json",
,
;
axios
.post("http://localhost:8000/upload", data, options,
onUploadProgress: (ProgressEvent) =>
this.setState(
loaded: (ProgressEvent.loaded / ProgressEvent.total) * 100,
);
,
)
.then((res) =>
// then print response status
console.log("upload success");
)
.catch((err) =>
// then print response status
console.log("upload fail with error: ", err);
);
;
【讨论】:
【参考方案8】:要在 Axios POST 请求中设置标头,请将第三个对象传递给 axios.post()
调用。
const token = '..your token..'
axios.post(url,
//...data
,
headers:
'Authorization': `Basic $token`
)
要在 Axios GET 请求中设置标头,请将第二个对象传递给 axios.get()
调用。
const token = '..your token..'
axios.get(url,
headers:
'Authorization': `Basic $token`
)
【讨论】:
【参考方案9】:拦截器
我遇到了同样的问题,原因是我没有在拦截器中返回响应。 javascript 理所当然地认为,我想返回 undefined
作为承诺:
// 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);
);
【讨论】:
【参考方案10】:axios.post
可以接受3个参数,最后一个参数可以接受一个config
可以设置header的对象。
您的问题的示例代码:
var data =
'key1': 'val1',
'key2': 'val2'
axios.post(Helper.getUserAPI(), data,
headers: Authorization: token && `Bearer $ token `
)
.then((response) =>
dispatch(type: FOUND_USER, data: response.data[0])
)
.catch((error) =>
dispatch(type: ERROR_FINDING_USER)
)
【讨论】:
以上是关于使用 axios POST 请求传递标头的主要内容,如果未能解决你的问题,请参考以下文章
在 react-native 中发送请求标头/授权 axios.post
使用axios请求数据,post请求出错。因为axios传递的请求参数是json格式,而后端接口要求是formData