FetchでのCORS対応
CORSが適用されるAPIリクエストに Fetch API を利用する場合は、第2引数のオプションに 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 を仕掛けてくるドメインの受け入れが必要になる。