TIL CORS

新学の品

クロスソース共有

Cross-Origin Resource Sharingの略.
2サードパーティ製アーキテクチャにおけるサーバとクライアントの信頼性の理解
これは相互検証のために確立された通信方法である.
この通信方法はXMLHttpRequestとFetchAPIで用いられる.
CSS、WebGLテクスチャ、drawImage()にも使用できます.
Webブラウザによるソース間共有
これは使用者の安全を守るための政策です.

プリフェッチ要求(プリフェッチ要求)

単純なリクエストとは異なり、
OPTIONSメソッドを使用して、HTTPリクエストを他のドメインのリソースに送信します.
これは、実際のリクエストが安全かどうかを確認する方法です.
この過程でプレイヤーのデータが破損し、
繰り上げ転送
プリフェッチ要求を提出する条件は次のとおりです.GET、POST、およびHEADを除く方法
他の方法で要求すると、自由飛行が要求されます.
より正確には、単純なリクエスト以外のすべてのリクエストである.

クライアントがPOSTに要求を送信する前に、
まずpreflightでサーバがリクエストを送信できるかどうかを検証します.
サーバはクライアントに応答できます.
HTTP Statusコードが200 OKに応答できることを教えてください.
クライアントから送信するリクエストが送信されます.

Cross-Origin HTTP Headers

HTTP Headersの簡単なリクエスト
過去のHTTPポスターで簡単に紹介されています.
今回はクロスソースのHTTP Headersについて議論します.
HTTP Request HeadersOriginpreflightリクエストのソース(host)を表します.Null、URIなどが入ります.

Origin: <origin>

Access-Control-Request-Method実際のリクエストで使用するHTTPメソッドを示します.

Access-Control-Request-Method: <method>

Access-Control-Request-Headers実際のリクエストで使用するHTTP Headersを示します.

Access-Control-Request-Headers: <field-name>[, <field-name>]*

HTTP Response HeadersAccess-Control-Allow-Origin

Access-Control-Allow-Origin: <origin> || *

単一のソースを指定することで、ブラウザはソースにリソースにアクセスできます.
または、資格のないリクエストの場合は、*と入力してください.
ブラウザのソースを考慮することなく、ユーザーがすべてのリソースにアクセスできるようにすることもできます.
たとえば、https://Pangho.comのコードがリソースにアクセスできるようにするには、次のように入力します.

Access-Control-Allow-Origin: https://Pangho.com

リソースにアクセスできるのは、上記のリクエストのソースのみです.
ホワイトリストを見ると分かりやすいです.Access-Control-Allow-Headers実際のリクエスト時に利用できるHTTP Headersを表します.

Access-Control-Allow-Headers: <header-name>[, <header-name>]*

Access-Control-Max-Ageアイドルリクエストの結果をキャッシュできる時間を示します.

Access-Control-Max-Age: <delta-seconds>

delta-secondsパラメータは、キャッシュ結果の時間(秒)を表します.Access-Control-Allow-Methodsリソースへのアクセス時に許可されるHTTPメソッドを指定します.

Access-Control-Allow-Methods: <method>[, <method>]*