FetchでのCORS対応

CORSが適用されるAPIリクエストに Fetch API を利用する場合は、第２引数のオプションに mode: 'cors' を設定する必要がある。

code:ts

mode: 'cors',

})

mode には cors no-cors same-origin の3種類がある

cors クロスオリジンリクエストを許可します。なおリクエスト先も CORS に対応する必要がある。

no-cors HEAD か GET、POST 以外のメソッドを防ぎます。(原典ママ)

same-origin このモードで他のオリジンにリクエストした場合エラーになる。

なお、そのままだとCookieが送信されないので、第2に引数のオプションに credential: true を設定する必要がある

code:ts

mode: 'cors',

credentials: true,

})

ここが詳しかった

フロントエンド側は基本的にこんな感じ。

後は API側で CORS を仕掛けてくるドメインの受け入れが必要になる。