Fetch APIの no-cors モードについて
no-corsモードの挙動が名前よりだいぶ制限がきつかったのでメモ。
no-cors モードについて
MDNのRequest.modeのページでno-corsは次のように説明されていました
HEAD か GET、POST 以外のメソッドを防ぎます。任意の ServiceWorkers がこれらをインターセプトする場合、シンプルヘッダーを除いてヘッダーを追加したりオーバーライドしたりできなくなります。加えて、JavaScript は解決された Response のプロパティにはアクセスできません。これはServiceWorkers が Web のセマンティクスに影響を与えないことを保証し、ドメインを跨いでデータが流出することでセキュリティやプライバシーの問題が生じるのを防ぎます。
実際に試してみましたが、no-corsは異なるドメイン間のリクエストでもJavaScriptからは結果のステータスだけ取得できるようなモードという認識で良さそうです。レスポンスデータにはヘッダーでさえもアクセスできないようです。
このときの制約はあくまでJavaScriptからのみなので、実際にはレスポンスがすべて返ってきています。
また、クロスドメイン間でのデータの流出や改ざんが行われないよう、GETとPOSTしかサポートしていません。それ以外のメソッドではエラーが発生します。
https://gyazo.com/8cf2f421dacd13ffbb58239a0906bd37
no-cors モードの使用ケース
no-corsモードを禁止する
GETはともかく、POSTをクロスサイトからポンポン投げられるとそれはそれでよろしくありません。
クロスオリジンからのAjaxコールを禁止するには、API側で Cross-Origin-Resource-Policyヘッダーにsame-siteもしくはsame-originを指定する必要があります。
このヘッダーは未指定の場合 no-cors モードを受け入れる cross-origin と同等の動作になります。
During a cross-origin resource policy check, if the header is set, the browser will deny no-cors requests issued from a different origin/site.