这篇主要记录2个由于跨域引起的问题
- react 在跨域下，使用
axios，获取headers中的Authorization - 在能获取到
headers中的Authorization后，产生新的问题Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
实际问题
在跨域的时，客户端能够访问到一些默认响应的headers：
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
那么默认情况下，客户端只能访问到以上headers...这是绝对不行的，因为我们要访问的是headers中的Authorization，axios的配置代码如下（部分），
axios.interceptors.response.use((res) => {
// do something
// 默认情况下 res.headers.authorization 的值是undefined，headers中没有authorization
if (res.headers.authorization) {
sessionStorage.setItem('authorization', res.headers.authorization);
}
// do something
}
解决问题一办法
在服务端添加addHeader，请看这篇，服务端添加header。
response.addHeader("Access-Control-Expose-Headers", "Authorization");
这个Access-Control-Expose-Headers的作用是：
Access-Control-Expose-Headers相当于一个服务器的headers白名单，可以让客户端进行访问例如：
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
这样设置完后 X-My-Custom-Header and X-Another-Custom-Header 就能被客户端所访问。
解决完获取res.headers.authorization 的值为undefined的问题，又有个新的问题。就是Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
解决问题二办法
在服务端的Access-Control-Allow-Headers中添加 Authorization，完美解决，例如：
String allowHeaders = "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With, Authorization";
response.addHeader("Access-Control-Allow-Headers", allowHeaders);
