這篇主要記錄2個由于跨域引起的問題
- react 在跨域下播聪，使用
axios朽基，獲取headers中的Authorization - 在能獲取到
headers中的Authorization后，產(chǎn)生新的問題Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
實際問題
在跨域的時离陶，客戶端能夠訪問到一些默認(rèn)響應(yīng)的headers：
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
那么默認(rèn)情況下稼虎，客戶端只能訪問到以上headers...這是絕對不行的，因為我們要訪問的是headers中的Authorization招刨，axios的配置代碼如下（部分）霎俩，
axios.interceptors.response.use((res) => {
// do something
// 默認(rèn)情況下 res.headers.authorization 的值是undefined，headers中沒有authorization
if (res.headers.authorization) {
sessionStorage.setItem('authorization', res.headers.authorization);
}
// do something
}
解決問題一辦法
在服務(wù)端添加addHeader，請看這篇茸苇，服務(wù)端添加header排苍。
response.addHeader("Access-Control-Expose-Headers", "Authorization");
這個Access-Control-Expose-Headers的作用是：
Access-Control-Expose-Headers相當(dāng)于一個服務(wù)器的headers白名單，可以讓客戶端進(jìn)行訪問例如：
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
這樣設(shè)置完后 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.
解決問題二辦法
在服務(wù)端的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);
