这里用到的是.net6+vue2
1：请求拦截器，发请求之前加入请求头
requests.interceptors.request.use((config) => {
//pagination 是后端响应的变量 通过请求头发送至服务器
config.headers.pagination = ""; // 根据实际情况自行修改
return config;
});
2：后端响应头配置
1：后端通过json序列化成字符串 传给前端
var paginationMetadata = new
{
previousPageLink,
nextPageLink,
totalCount = TouristRoutes.TotalCount,
pageSize = TouristRoutes.PageSize,
currentPage = TouristRoutes.CurrentPage,
totalPages = TouristRoutes.TotalPages
};
//把分页数据和其他所需数据通过Headers发过去
Response.Headers.Add("pagination",
Newtonsoft.Json.JsonConvert.SerializeObject(paginationMetadata));
2：在program 配置跨域中进行配置
//配置前后端跨域问题*
builder.Services.AddCors(opt =>
{
opt.AddDefaultPolicy(b =>
{
//信任此域名的请求 只允许特定的域名
b.WithOrigins(new string[] { "http://localhost:8080" })
//允许任意的请求 允许任意的报文头 接受任何的认证方式 把指定响应头暴露出去
.AllowAnyMethod().AllowAnyHeader().AllowCredentials().WithExposedHeaders("pagination");
});
});
3：在前端响应拦截器中获取
按需返回所需数据
//响应拦截器
requests.interceptors.response.use((res) => {
//获取服务器自定义响应头
console.log(res.headers.pagination);
//这里返回全部数据，在vuex中反序列化响应头就可以得到响应头的对象
return res;
}, (error) => {
return error.response;
// return Promise.reject(Message.error(error.response.data));
});
文章来源地址https://www.toymoban.com/news/detail-731845.html
文章来源：https://www.toymoban.com/news/detail-731845.html
到了这里，关于vue2 使用axios获取服务器响应头(前后端分离)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
