适用场景：前后端分离项目，接口需要身份认证，一般通过 Token 放在请求头
headers传递给后端校验。
说明
- Token 放在请求头（headers）中，不属于请求体 data，也不属于url参数 params
- 后端从
Request.Headers读取自定义请求头（如TOKEN、USERID）完成身份校验 - 这是前后端分离项目最常用的认证方案
前端完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>例子</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/axios.js"></script>
</head>
<body>
<div id="name"></div>
<script>
$(function () {
let data = {
ID: 123
},
headers = {
USERID: "",
TOKEN: "123343444"
};
axios({
method: 'post',
url: '/home/user',
// 请求体参数
data: data,
// 设置自定义请求头，携带token认证信息
headers: headers,
responseType: 'json'
}).then(response => {
// 请求成功
let res = response.data;
$("#name").text(res.user + res.token);
}).catch(error => {
// 请求失败
console.log(error);
});
});
</script>
</body>
</html>
Code language: HTML, XML (xml)ASP.NET MVC 后端代码
[HttpPost]
public ActionResult User(int id)
{
// 从请求头中读取前端传过来的TOKEN
var token = Request.Headers["TOKEN"];
return Json(new { user = "bamn.cn：" + id, token = token }, JsonRequestBehavior.AllowGet);
}
Code language: PHP (php)后端查看所有请求头
Request.Headers.AllKeys 可以拿到全部请求头集合，示例：
[0]: "Connection"
[1]: "Content-Length"
[2]: "Content-Type"
[3]: "Accept"
[4]: "Accept-Encoding"
[5]: "Accept-Language"
[6]: "Cookie"
[7]: "Host"
[8]: "Referer"
[9]: "User-Agent"
[10]: "USERID"
[11]: "TOKEN" // 我们自定义的header
[12]: "Origin"
[13]: "Sec-Fetch-Site"
[14]: "Sec-Fetch-Mode"
[15]: "Sec-Fetch-Dest"
Code language: JavaScript (javascript)简写写法（axios.post）
let data = { ID:123 };
let headers = { TOKEN:"123343444" };
axios.post('/home/user', data, { headers: headers })
.then(res=>{
$("#name").text(res.data.user + res.data.token);
}).catch(err=>{
console.log(err);
})
Code language: JavaScript (javascript)拓展知识点
- 全局统一设置Header（推荐） 如果所有接口都要携带token，不用每次请求单独写headers：
axios.defaults.headers.common['TOKEN'] = "123343444";
Code language: JavaScript (javascript)设置之后，后续所有axios请求自动带上这个请求头。
- 常见规范：很多项目请求头字段名使用
Authorization: Bearer xxx格式存放token
headers:{
"Authorization":"Bearer 123343444"
}
Code language: JavaScript (javascript)- 注意：自定义Header可能触发跨域预检OPTIONS请求，后端CORS需要配置允许这个自定义头，否则浏览器会拦截。
小结
- headers：存放认证信息（token），属于请求头，不是请求参数
- data：POST请求体业务参数
- params：GET的url查询参数
- 后端通过
Request.Headers["键名"]获取自定义请求头
Previous: Axios的Post请求