CORSの設定

ToDoアプリでは、フロントエンドとバックエンドを別々のアプリとして作成します。フロントエンドアプリはhttp://localhost:3000、バックエンドアプリはhttp://localhost:9080で起動するため、ウェブコンテンツとしては異なるオリジンということになります。

セキュリティ上の理由から、ブラウザでは異なるオリジンへのリクエストを制限しています。
（参考：同一オリジンポリシー | MDN）

この制限により、そのままではフロントエンドアプリからバックエンドアプリのREST APIにアクセスしようとするとエラーが発生してしまいます。

この制限に対応するため、ToDoアプリでは、オリジン間リソース共有（以下CORS）と呼ばれる仕組みを利用します。（参考：オリジン間リソース共有（CORS）| MDN）

生成したクライアントコードでは、Fetch APIを使用してHTTP通信を行います。このAPIでは、リクエストを送信するためのfetch()メソッドの引数であるinitオブジェクトにmodeとcredentialsを設定することで、CORSを使用することができます。

{
  mode: 'cors',
  credentials: 'include',
}

先ほど作成したBackendServiceでこの設定をするため、次のように実装します。リクエスト時にmodeとcredentialsが設定されるように、corsHandlerをMiddlewareとして実装します。実装したcorsHandlerを使用するために、configurationオブジェクトのmiddlewareに追加します。

src/backend/BackendService.ts

const corsHandler: Middleware = {
  pre: async context => {
    return {
      url: context.url,
      init: {
        ...context.init,
        mode: 'cors',
        credentials: 'include',
      },
    };
  },
};

const configuration = new Configuration({
  middleware: [corsHandler, requestLogger],
});

これで、フロントエンドのCORS設定については完了です。