关于axios自定义请求头问题
运行环境
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 这样就可以自定义请求头发送求请求了