CORSの設定

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

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

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

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

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

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

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

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設定については完了です。