vue2 使用axios获取服务器响应头(前后端分离)

这里用到的是.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));
});
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值