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')

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.