這篇主要記錄2個(gè)由于跨域引起的問題

1. react 在跨域下，使用axios，獲取headers中的Authorization
2. 在能獲取到headers中的Authorization后，產(chǎn)生新的問題Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

實(shí)際問題

在跨域的時(shí)，客戶端能夠訪問到一些默認(rèn)響應(yīng)的headers：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

那么默認(rèn)情況下，客戶端只能訪問到以上headers...這是絕對(duì)不行的，因?yàn)槲覀円L問的是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，請(qǐng)看這篇，服務(wù)端添加header。

response.addHeader("Access-Control-Expose-Headers", "Authorization");

這個(gè)Access-Control-Expose-Headers的作用是：
Access-Control-Expose-Headers相當(dāng)于一個(gè)服務(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的問題，又有個(gè)新的問題。就是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);