別のオリジンを許可する
CoddyのNode.jsジャーニー「REST API」セクションの一部。レッスン 19/25。
あるオリジンのページが、別のオリジンからのAPIレスポンスを読み取るには許可が必要です。ブラウザーはOriginリクエストヘッダーを送信します。APIは、許可するオリジンを指定したAccess-Control-Allow-Originで応答できます。
if (req.get('origin') === 'https://shop.example.com') {
res.set('Access-Control-Allow-Origin', 'https://shop.example.com');
}ブラウザーは、ページにレスポンスを公開する前に、このレスポンスヘッダーを確認します。APIはリクエストを受け取る場合があります。CORSはログイン確認ではありません。リクエストバーはCORSを強制しませんが、Headersタブでブラウザーが受け取る内容を確認できます。
req.get('origin')はリクエストのOriginヘッダーを読み取ります。ヘッダー名では大文字と小文字が区別されません。
チャレンジ
簡単これは小規模な練習用プロジェクトです。セットアップは用意されているので、server.jsだけを編集してください。
用意されているGETルートでは、Originがhttps://board.example.comと等しい場合にのみAllow-Originを設定してください。JSONレスポンスはそのままにしてください。実行後、そのOriginヘッダーを付けてGET /resultを送信します。レスポンスヘッダーは一致している必要があります。異なるOriginまたはOriginがない場合、Allow-Originヘッダーは付きません。
リクエストバーのHeadersフィールドに、Origin: https://board.example.comと入力してください。レスポンスヘッダーを確認して、許可されていることを確かめてください。
自分で試してみよう
import express from 'express';
const app = express();
app.get('/result', (req, res) => {
res.json({ ok: true });
});
app.listen(3000);
REST APIのすべてのレッスン
自分で練習してみよう: Expressプレイグラウンド