vue

关于axios自定义请求头问题

2018-09-18  本文已影响7748人  Lazy_3c4c

运行环境


vue+axios

流程如下


登陆成功   后台在响应头中返回token

保存token

在axios请求拦截器中添加token并发送


遇到问题:

发送的请求  是options请求

并且请求头里的并不是

token:value的形式


解析:


网上找了很多说法总结下来大致就是:

当发送自定义请求头时

浏览器会先发送一次options请求 来验证服务器是否支持自定义请求头

如果通过则再次发送正式请求

解决:


去找后台吧 他应该比你更懂,贴一下网上找到的方法和我后台的解决方法

网上找的 不过我们后台没试出来。。可能是因为业务逻辑的原因

// TODO 支持跨域访问response.setHeader("Access-Control-Allow-Origin", "*");

        response.setHeader("Access-Control-Allow-Credentials", "true");

        response.setHeader("Access-Control-Allow-Methods", "*");

        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");

        response.setHeader("Access-Control-Expose-Headers", "*");

        if(request.getMethod().equals("OPTIONS")) {

            HttpUtil.setResponse(response, HttpStatus.OK.value(), null);

            return;

        }

上面代码需要加入允许的头部,content-type和access-token,并且判断请求的方法是options的时候,返回ok(200)给客户端,这样才能继续发正式的post请求。 

以下是我找后台要的配置

然后就是最后一个问题  (如果token实在响应头中返回,不是就不存在这个问题)

在response.headers 中没有token字段

服务器返回了tokne以后 由于实在响应头中返回  浏览器会默认过滤响应头从而获取不到

这是只需要后台设置一下就可以了  就是第一张图片的最后一行 指定返回自定义响应头token。

ok 这样就可以自定义请求头发送求请求了

上一篇下一篇

猜你喜欢

热点阅读