这里用到的是.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));
});
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐