HTTP・Web 基礎4 択難易度 標準

fetch が CORS エラーで失敗した。対処として正しいのはどれ？

正答

1. 利用者のブラウザ設定でセキュリティ機能を無効にしてもらう
2. fetch のリクエストヘッダーに Access-Control-Allow-Origin を付ける
3. API サーバーのレスポンスに Access-Control-Allow-Origin を付ける
4. フロントエンドの fetch に mode: 'no-cors' を指定する

解説

CORS（オリジン間リソース共有）は、別オリジンへのリクエストの結果をブラウザが JavaScript に渡してよいかを、サーバーのレスポンスヘッダー Access-Control-Allow-Origin で判断する仕組み。したがって直すのは API サーバー側の設定。Access-Control-Allow-Origin はレスポンス用のヘッダーなので、リクエストに付けても意味が無く、むしろプリフライトで拒否される。mode: 'no-cors' はエラーを隠すだけでレスポンス本文を読めなくなる。ブラウザ設定の変更は利用者全員には頼めない。

参考: developer.mozilla.org

corsheader