获取响应不包含服务器发送的授权 Header

Question

我正在构建一个应用程序，其中服务器验证客户端的令牌并生成一个应用程序令牌以供进一步使用。

我使用 curl 来确保一切正常。

curl -XPOST -v -H "X-ID-TOKEN:eyJhbGciOiJSUzI1NiIsImtpZCI6ImIyYmRjZDkyNGZhNWI1ZThhYjkwNTQ3M2ZjZTYxMGU3MWU0MjJlNmQifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vc3RhZ2luZy1wZW5ueXRyYWsiLCJuYW1lIjoiSGFyaXQgSGltYW5zaHUiLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDQuZ29vZ2xldXNlcmNvbnRlbnQuY29tLy1fbFhqMk9VbVRuZy9BQUFBQUFBQUFBS
S9BQUFBQUFBQUFDTS9YYU5jMTJadGV5OC9waG90by5qcGciLCJhdWQiOiJzdGFnaW5nLXBlbm55dHJhayIsImF1dGhfdGltZSI6MTUwMTczMTc2MSwidXNlcl9pZCI6InJ4WjZtb240MGhhN1J5SDVpSEFPSHkxN0hrbzEiLCJzdWIiOiJyeFo2bW9uNDBoYTdSeUg1aUhBT0h5MTdIa28xIiwiaWF0IjoxNTAxNzMxNzYyLCJleHAiOjE1MDE3MzUzNjIsImVtYWlsIjoiaGFyaXQuc3Vic2NyaXB0aW9uc0BnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZmlyZWJhc
2UiOnsiaWRlbnRpdGllcyI6eyJnb29nbGUuY29tIjpbIjEwMDIxNjY5NjgzMjQ3MDQzMTUwNyJdLCJlbWFpbCI6WyJoYXJpdC5zdWJzY3JpcHRpb25zQGdtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6Imdvb2dsZS5jb20ifX0.oWWug78iVJITZsJdA7npwjaG_CFnhQahwWCjnkz8Vi2famuTL61s8_Shx4oZVbKzju-L7ebEC4MSOvMc3HeEUwiwt9SunOo8JWfzwgpDbVzFTlnHu5OUeESssniXY4EyAF0uvI6jh1zoEz4SbPO-D87RXMNZYo69c6PFJVDYv--0sm4M7Ajmh7ynMmoEMH0pzjh-7l91yRguO5piQE9GQYwWe9-Jj8YlqWMnMa69M_jMrE14fMCB2mjoa9jJvZR1a-ao8LqO1U1FO64mzgf55yG8OS7aGVDN7gLxk1-RcqLxJogo0BDqsrdDykoeGHb1UflQP7dtazc47r3flELBGw" "http://loc
alhost:8080/login"
*   Trying ::1...
* Connected to localhost (::1) port 8080 (#0)
> POST /login HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.43.0
> Accept: */*
> X-ID-TOKEN:eyJhbGciOiJSUzI1NiIsImtpZCI6ImIyYmRjZDkyNGZhNWI1ZThhYjkwNTQ3M2ZjZTYxMGU3MWU0MjJlNmQifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vc3RhZ2luZy1wZW5ueXRyYWsiLCJuYW1lIjoiSGFyaXQgSGltYW5zaHUiLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDQuZ29vZ2xldXNlcmNvbnRlbnQuY29tLy1fbFhqMk9VbVRuZy9BQUFBQUFBQUFBSS9BQUFBQUFBQUFDTS9YYU5jMTJadGV5OC9waG90by5qcGciLCJhdWQi
OiJzdGFnaW5nLXBlbm55dHJhayIsImF1dGhfdGltZSI6MTUwMTczMTc2MSwidXNlcl9pZCI6InJ4WjZtb240MGhhN1J5SDVpSEFPSHkxN0hrbzEiLCJzdWIiOiJyeFo2bW9uNDBoYTdSeUg1aUhBT0h5MTdIa28xIiwiaWF0IjoxNTAxNzMxNzYyLCJleHAiOjE1MDE3MzUzNjIsImVtYWlsIjoiaGFyaXQuc3Vic2NyaXB0aW9uc0BnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJnb29nbGUuY29tIjpbIjEwMDIxNjY5
NjgzMjQ3MDQzMTUwNyJdLCJlbWFpbCI6WyJoYXJpdC5zdWJzY3JpcHRpb25zQGdtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6Imdvb2dsZS5jb20ifX0.oWWug78iVJITZsJdA7npwjaG_CFnhQahwWCjnkz8Vi2famuTL61s8_Shx4oZVbKzju-L7ebEC4MSOvMc3HeEUwiwt9SunOo8JWfzwgpDbVzFTlnHu5OUeESssniXY4EyAF0uvI6jh1zoEz4SbPO-D87RXMNZYo69c6PFJVDYv--0sm4M7Ajmh7ynMmoEMH0pzjh-7l91yRguO5piQE9GQYwWe9-Jj8YlqWMnMa69M_jMrE14fMCB2mjoa9jJvZR1a-ao8LqO1U1FO64mzgf55yG8OS7aGVDN7gLxk1-RcqLxJogo0BDqsrdDykoeGHb1UflQP7dtazc47r3flELBGw
>
< HTTP/1.1 200
< X-Content-Type-Options: nosniff
< X-XSS-Protection: 1; mode=block
< Cache-Control: no-cache, no-store, max-age=0, must-revalidate
< Pragma: no-cache
< Expires: 0
< X-Frame-Options: DENY
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Headers: origin, content-type, accept, authorization, bearer, x-id-token
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, HEAD
< Access-Control-Max-Age: 1209600
< Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyeFo2bW9uNDBoYTdSeUg1aUhBT0h5MTdIa28xIiwiZXhwIjoxNTAyNTgyNDAwfQ.o3aw_ozg813jga6TdCvtV1mMJngO6f4Wgy2dYm4G7O2G6LvYADzIafXJn0Wmvw8-f5scDcmTf6wT_zyMHIDFRg
< Content-Length: 0
< Date: Thu, 03 Aug 2017 03:55:50 GMT
<
* Connection #0 to host localhost left intact

如您所见，服务器将 Authorization header 发送回客户端。

在我的 Javascript 应用程序中，我与服务器交互的代码看起来像

Api.js

let getAppToken = (idToken) => {
    return fetch("http://localhost:8080/login", {
        method: "POST",
        headers: {
            "X-ID-TOKEN": idToken
        }
    });
};

module.exports = {
    getAppToken: getAppToken,
};

在我的 React 组件中用作
Login.js

            console.log("idToken:", idToken);
            getAppToken(idToken)
                .then((response) => {
                    response.headers.forEach((val, key) => {
                        console.log(key, val)
                    });
                });

当我运行这个 React 应用程序时，我看到的唯一 header 是

cache-control no-cache, no-store, max-age=0, must-revalidate
expires 0
pragma no-cache

为什么我看不到服务器发送的剩余 header？我该如何解决这种情况？

谢谢

Answer 1

如果您希望浏览器允许您的请求前端 JavaScript 代码访问 Authorization 响应 header 值。

如果响应不包含 Access-Control-Expose-Headers header 的值，浏览器将允许您从 client-side JavaScript 访问的唯一响应 header在您的网络应用程序中是 Cache-Control， Content-Language, Content-Type, Expires, Last-Modified 和 Pragma.

请参阅 https://fetch.spec.whatwg.org/#cors-safelisted-response-header-name 了解相关规范。

获取响应不包含服务器发送的授权 Header

Fetch response does not contain Authorization Header sent by Server

javascript

curl

cors

reactjs

fetch-api