axios 设置headers.Authorization都成功了，但是请求头还是没有，这是为什么？

Question

下面是我的拦截器：

//Axios请求拦截器，随着业务的复杂，Axios层的使用将会越来越复杂，写个精简版的就行了。
axios.interceptors.request.use(config => {
    let token = store.state.token;
    if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.Authorization = token;
        console.log('interceptors config=',config)
    }
    return config
}, error => {
    return Promise.reject(error)
})

Answer 1

已经解决了，我还在想为什么postman可以访问，源来postman不存在跨域的问题，所以没问题，所以只要后台加上跨域和放开Authorization权限就OK了，
参考地址：

jwt-spring-security-demo
为什么使用postman发送请求时不会有跨域问题？

if (request.getMethod().equals("OPTIONS"))
            //跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。
            // 另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），
            // 浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），
            // 从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。
            // 在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。
            // 参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
            response.setStatus(HttpServletResponse.SC_OK);
        else
            filterChain.doFilter(request, response);

Answer 2

你第二张截图是以OPTIONS请求发过去后端的，OPTIONS请求肯定没有你这个headers.Authorization， 并且你这个请求已经返回了一个401状态值了。

OPTIONS用来请求时的预检，用以判断实际发送的请求是否安全(因为你请求头携带了Authorization),所以后端得允许
这个请求通过才能有下一步的请求的。

解决方法： 后端接口允许这个OPTIONS请求通过,通过后你就发现前端同一个请求发送了两次, 在第二条请求里你可以发现你的Authorization已经显示你面前了。

Answer 3

这篇文章和两条回答对我的问题帮助极大,也解决了我纠结好几天的问题.谢谢你们!

Answer 4

我有差不多的问题，我的报302，后台拿不到headers中的信息

Answer 5

不知道为什么

Answer 6

楼主怎么解决的啊

Answer 7

axios可以配置默认Authorization

Answer 8

1.我的是因为请求头与后端跨域处理拦截器允许的请求头对不上。

option请求：https://github.com/yuyumyself/front-end/blob/master/%E8%B7%A8%E5%9F%9F/option%E8%AF%B7%E6%B1%82.txt
跨域后端代码：https://github.com/yuyumyself/front-end/blob/master/%E8%B7%A8%E5%9F%9F/CorsFilter.java

Answer 9

请问老哥最后怎么解决了，修改了哪些代码，我看你上面的不是很懂

Answer 10

楼主怎么解决了，求分享