关于web网页Js请求头的设置

目的：完成在vue项目里的请求头设置，并在webapi中获取头，然后执行一定的操作（vue+.net webapi)。

结果：顺利完成，web请求头缺乏全面的l了解，真正的企业项目中都会对请求的拦截处理。

步骤：

1.设置vue请求拦截配置请求头。

import axios from 'axios';
 

let util = {

};
 

const ajaxUrl = 'http://localhost:33490'

util.ajaxUrl=ajaxUrl;
util.ajax = axios.create({
    baseURL: ajaxUrl,
    timeout: 100000
});

 //添加请求拦截器
util.ajax.interceptors.request.use(function (config) {

     const token = window.sessionStorage.getItem("token");//获取web缓存

     if (token) {
         // 这里将token设置到headers中，header的key是Authorization，这个key值根据你的需要进行修改即可
          config.headers.common["Authorization"] ='Bearer ' +token //Bearer后面一定要有个空格
          if (JSON.parse(window.sessionStorage.getItem("store")) !=null) 
          {
           config.headers.common["StoreId"] = JSON.parse(window.sessionStorage.getItem("store")).Id;
          }
        console.log("设置请求头")
     }
    return config;
  }, function (error) {
    console.log("请求错误")
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
util.ajax.interceptors.response.use(function (response) {
   console.log('响应成功')
   console.log(response)
    if(response.data.ErrorCode!="" )
    {
       console.log("响应错误拦截")
    }
    return response;
  }, function (error) {
    console.log("响应错误")
    return Promise.reject(error);
  });
export default util;

 

2.后台拦截webapi获取请求响应

webap注册响应拦截，

            //注册路由过滤器
            //builder.Register(c => new BossAppAuthFilter(c.Resolve<YPC_IAccountService>())).AsWebApiActionFilterFor<BossControllerBase>().InstancePerApiRequest();
            builder.Register(c => new AuthorizeFilterAttribute(c.Resolve<YP_IAccountService>(),c.Resolve<YP_ITokenService>())).AsWebApiActionFilterFor<ApiControllerBase>().InstancePerApiRequest();
           // builder.Register(c => new UnitOfWorkFilterAttribute(c.Resolve<IUnitOfWork>())).AsWebApiActionFilterFor<ApiControllerBase>().InstancePerApiRequest();
            builder.RegisterApiControllers(Assembly.GetExecutingAssembly());
            config.DependencyResolver = new AutofacWebApiDependencyResolver(container);
            builder.RegisterApiControllers(Assembly.GetExecutingAssembly());
            builder.RegisterWebApiFilterProvider(config);
            builder.Update(container);

这样设置为了每一个响应的请求都能拦截，然后执行指定的方法。

HttpContext.Current.Request.Headers.Authorization  //获取的信息为'Bearer ' +token

HttpContext.Current.Request.Headers.Authorization.Parameter //为token   //其中vue是不能设置Parameter 的所以需要'Bearer ' 加一个空格。

 

这里有个坑就是 关于http的传输协议。