这里用到的是.net6+vue2
1:请求拦截器,发请求之前加入请求头
requests.interceptors.request.use((config) => {
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);
return res;
}, (error) => {
return error.response;
});