CORS

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

https://board.example.com 上のページが fetch を使ってあなたの API を呼び出しますが、ブラウザーは応答をブロックします。ブラウザーは、サーバーが CORS ヘッダーで他のオリジンを許可しない限り、ページが応答を読み取れるのは、そのページの出所であるスキーム、ホスト、ポートからなる独自のオリジンからのものだけです。

OPTIONS /api/products/7
Origin: https://shop.example.com
Access-Control-Request-Method: DELETE

204 No Content
Access-Control-Allow-Origin: https://shop.example.com
Access-Control-Allow-Methods: GET, DELETE
Access-Control-Allow-Headers: Content-Type

DELETE、PATCH、または JSON ボディを送信する前に、ブラウザーはこのプリフライトを送信し、応答で許可された場合にのみ処理を続行します。他のすべての応答にも Access-Control-Allow-Origin が必要です。* は任意のオリジンを許可しますが、ページが Cookie を送信する場合（Access-Control-Allow-Credentials: true）、ブラウザーはこれを拒否するため、オリジンを指定してください。CORS を適用するのはブラウザーだけです。curl とリクエストバーはこれを無視します。

チャレンジ

簡単

ルートの前にあるミドルウェアは、すべての応答に Access-Control-Allow-Origin: https://board.example.com と Access-Control-Allow-Credentials: true を設定します。
OPTIONS は、GET、POST、PUT、PATCH、DELETE を列挙した Access-Control-Allow-Methods と、Access-Control-Allow-Headers: Content-Type を含めて 204 を返します。

ブラウザーを操作してみましょう。ヘッダー Origin: https://board.example.com を付けて OPTIONS /api/tasks/2 を送信し、続いて GET /api/tasks を送信して、それぞれの応答ヘッダーを確認します。

自分で試してみよう

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