TRY AND ERROR

気になったこと、勉強したこと、その他雑記など色々メモしていきます。。Sometimes these posts will be written in English.,

【Vue】CORS環境でaxiosでレスポンスヘッダが足りない時

CORSの場合、API側で色々詰めてるはずのレスポンスヘッダをダンプするとContent-Typeしか返ってこない。。
というかブラウザの開発コンソールのネットワークタブなどで見ると実際には返ってきているが、console.logでダンプした時には除去されている。
どうやらブラウザではデフォで以下のヘッダーしか見せないようにしているそうです。


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


サーバ側でAccess-Control-Expose-Headersヘッダをつけると、ここで指定したヘッダをjsで取れるようになります。

Access-Control-Expose-Headers: YourCustomHeaderName1, YourCustomHeaderName2



In the case of CORS, you seems to get headers only like below even if you set something other stuff on the server side.But actually you can see other headers which is correctly passed on the network tabs of developer console.
Why is that?
The reason is that browser permits you to access headers just only following fields by default. If you get other headers you could put 'Access-Control-Expose-Headers' on the server side and you explictly set your header fieldname in it.