CORS

CoddyのNode.jsジャーニー「REST API」セクションの一部。レッスン 20/25。

クロスオリジンの PUT、PATCH、DELETE リクエストや、JSON の Content-Type を持つリクエストでは、通常、ブラウザーは最初に許可を求めます。この OPTIONS リクエストはプリフライトです。レスポンスでは、オリジン、メソッド、リクエストヘッダーを許可する必要があります。

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://shop.example.com
Access-Control-Allow-Methods: GET, POST, PATCH, OPTIONS
Access-Control-Allow-Headers: Content-Type

プリフライトを含むすべてのレスポンスに Access-Control-Allow-Origin を設定します。許可するオリジンが1つなら、すべてのレスポンスでその固定値を送信できます。ブラウザーはその値とページのオリジンを照合します。メソッドまたはヘッダーの値は、それぞれカンマ区切りの文字列を1つ指定します。

OPTIONS には 204 を送信して、レスポンスを終了します。それ以外のメソッドでは、オリジンのヘッダーを維持して next() を呼び出します。エラーレスポンスにも許可が適用されるよう、このミドルウェアは express.json() やルートより前に配置します。リクエストバーでヘッダーを確認できますが、CORS を適用するのはブラウザーだけです。

チャレンジ

簡単

このステップでは、Paginationのプロジェクトファイル（routes/tasks.jsなど）ではなく、コースで用意されたタスクトラッカーAPIプロジェクトを開きます。これまでの作業は、それぞれのレッスンに残っています。server.jsを編集する前に、用意されたファイルを読んでください。このコピーには、タスクのCRUDルート、バリデーション、ページネーション、フィルター、ソートが含まれています。

server.jsで、express.json()とルートより前に、https://board.example.comからのアクセスを許可するミドルウェアを追加してください。Access-Control-Allow-Originをそのオリジンと完全に一致する値に設定し、Access-Control-Allow-MethodsをGET、POST、PUT、PATCH、DELETE、OPTIONSに設定し、Access-Control-Allow-HeadersをContent-Typeに設定します。OPTIONSには204で応答して終了します。それ以外のメソッドではnextを呼び出してください。

試してみましょう。OPTIONS /api/tasks/2を送信します。204と3つの許可ヘッダーが表示されるはずです。GET /api/tasksを送信します。タスクリストとオリジンヘッダーは、引き続き返されます。POST {"title":"Order new chairs"}を/api/tasksに送信しても、引き続き201でタスクが作成されます。

自分で試してみよう

import express from 'express';
import { sendError } from './errors.js';
import taskRoutes from './routes/tasks.js';

const app = express();
app.use(express.json());

app.use('/api/tasks', taskRoutes);

// ルートで発生したエラーはここで処理されます。有効なJSONではないボディは
// クライアント側の問題（400）で、それ以外はサーバー側の問題（500）です。
app.use((err, req, res, next) => {
    if (err.type === 'entity.parse.failed') {
        return sendError(res, 400, 'invalid_json', 'The body is not valid JSON');
    }
    console.error(err);
    sendError(res, 500, 'server_error', 'Something went wrong');
});

app.listen(3000, () => {
    console.log('Task tracker API on port 3000');
});