Expresssのレスポンスヘッダーを設定する時に注意すること

Expressでレスポンスヘッダーを設定しているのに、受け取る時には値が含まれていない時にチェックすることがあります。

通常Expressでは下記のようにレスポンスヘッダーを設定します。

例えばX-Auth-Tokenを埋め込む場合。

res.set('X-Auth-Token', 'token')

設定は上記コードで完了ですが、これだけではまだクライアント側で受け取ることができません。

カスタムヘッダーはAccess-Control-Expose-Headersを設定

レスポンスヘッダーに埋め込むのが独自のヘッダー情報である場合は、Access-Control-Expose-Headersを合わせて設定する必要があります。

res.header('Access-Control-Expose-Headers', 'X-Auth-Token')

これでクライアント側でもカスタムヘッダーを受け取ることが可能になります。 もしヘッダー情報が複数ある場合には下記の様に文字列をカンマで区切ることで指定可能です。

res.header('Access-Control-Expose-Headers', 'X-Auth-Token, X-Auth2-Token')
この記事をシェアする
コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsを身につけたい!
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。