フェッチ応答にサーバーから送信された承認ヘッダーが含まれていません

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ヘッダーをクライアントに返します。私Javascriptアプリケーションで

、サーバーと対話するために私のコードは
Login.js

として私 React部品に使用されている

Api.js

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

module.exports = { 
    getAppToken: getAppToken, 
}; 

のように見えます

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

私はこの Reactアプリケーションを実行すると0

、私が見る唯一のヘッダは、私がサーバーから送信された残りのヘッダが表示されないのはなぜ

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

ですか？この状況をどうやって修正できますか？

おかげ

Answer 1

は、サーバーを使用すると、ブラウザがAuthorizationレスポンスヘッダの値にアクセスするには、あなたの要求フロントエンドのJavaScriptコードを許可する場合は、その値に「Authorization」を含むAccess-Control-Expose-Headers response headerを送信するように設定する必要があります。

応答がAccess-Control-Expose-Headersヘッダーに値が含まれていない場合は、ブラウザがあなたのWebアプリでは、クライアント側のJavaScriptからアクセスできるようになる唯一の応答ヘッダがCache-Control、 Content-Language、 Content-Type、 Expires、 Last-Modified としています Pragma。

https://fetch.spec.whatwg.org/#cors-safelisted-response-header-nameを参照してください。