CORS

• オリジン間リソース共有 (CORS)
• CORS とは？
• CORSの仕様はなぜ複雑なのか
• CORSプロトコル
• CORS & Same Origin Policy 入門

• 【翻訳記事】CORSを理解する
• なんとなく CORS がわかる...はもう終わりにする。
• 【CORS】クロスドメインによるエラーについて
• Cross-Origin Resource Sharing(CORS)を使用したHTTPリクエスト

• ReactからLaravelのAPIサーバーを叩く + CORS概説
• CORS未対応APIに、PROXYを中継して通信を行う

• JSONPは危険なので禁止
• 【JSONとJSONP】Ajaxで CORS policyにひっかかってデータ取得できない時【JavaScript】

基本情報 †

同一オリジンポリシーが適用されるケース †

• JavaScript での非同期通信（Ajax, いわゆる XMLHttpRequest? や Fetch API を使った通信）
• CSS での @font-face を使った Web フォントの読み込み
• WebGL テクスチャの読み込み
• canvas の drawImage() を用いた画像やビデオフレームの描画
• 画像から CSS シェイプの生成

同一オリジンポリシーが適用されないケース †

• <img> タグの src 属性で読み込んだ画像
• <link> タグの href 属性で読み込んだ CSS
• <script> タグの src 属性で読み込んだ JavaScript
• <form> タグの action 属性で設定した送信先 URL
• <video>, <audio> タグの src 属性で読み込んだマルチメディアファイル
• <iframe>, <frame> タグの src 属性での別サイトコンテンツの読み込み

リクエストの種類 †

• 同一オリジンポリシーによって制限が発生するかは、通常「シンプルリクエスト」であるかどうかで決まる
• シンプルリクエストでなかった場合、ブラウザのセキュリティチェックフローに則って、プレフライトリクエストを交えたリクエストフローが実施される

シンプルリクエスト †

以下の条件すべてに合致するリクエスト。

• リクエストのメソッドが GET, POST, HEAD のいずれかに設定されている場合
• Content-Type ヘッダーが application / x-www-form-urlencoded , multipart / form-data , text / plain のいずれかに設定されている場合
• 以下の一般的なヘッダのみで、特殊なヘッダが存在しない場合
  • Accept
  • Accept-Language
  • Content-Language
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width

プリフライトリクエスト †

以下の条件のいずれかに合致するリクエスト。

• リクエストのメソッドがGET, POST, HEAD でない場合
• Content-Type ヘッダーが application / x-www-form-urlencoded , multipart / form-data , text / plain のいずれでもない場合
• シンプルリクエストで許可されたリクエストヘッダ以外が付与されている場合

解決策 †

Proxy経由 †

cors-anywhere †

• CORS未対応APIに、PROXYを中継して通信を行う

• Missing required request header. Must specify one of: origin,x-requested-with

• 403 Forbidden on CORS request from local
• cors-anywhereが使えなくなって困った話

抜け道 †

• Allow CORS: Access-Control-Allow-Origin ... Chromeの拡張機能