Corsの詳細な外観

この記事は、Panayiotis "PVGR" Velisarakos（すべてのSitePoint Peer Revenyersのおかげで！）によって査読されたこの記事で、HTML5 APIを有効にして以前に制限された外部リソースにアクセスできるHTML5 APIであるクロスオリジンリソース共有（CORS）を探ります。 CORSは同じオリジンポリシーを緩和し、異なるドメインへのリクエストを許可します。 たとえば、CORSの前に、ドメインのクロスAJAX要求は不可能でした。この記事では、CORがWebエクスペリエンスをどのように強化するかを示しています

キーテイクアウト：

CORSは、ほとんどの最新のブラウザでサポートされています。

1. ヘッダーは、どのオリジンがサーバーの応答にアクセスできるかを決定します。
2. Access-Control-Allow-Originヘッダーはクッキーアクセスを制御します。
3. 簡単なリクエスト（get、head、post）は、プレイライトをトリガーしないでください。より複雑なリクエストはそうします。Access-Control-Allow-Credentials
または値を使用） <code> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173984767246953.jpg" class="lazy" alt=" corsの詳細な外観 /><li> <code>crossoriginanonymousプリライト：use-credentials<img src="> <p><strong>Preflights:</strong></p> <p>For complex requests (methods beyond GET/HEAD/POST, or custom headers), preflights (an initial OPTIONS request) verify server acceptance. The server responds with <code>Access-Control-Allow-Origin Access-Control-Allow-Credentials複雑なリクエスト（Get/Head/Postまたはカスタムヘッダーを超えた方法）の場合、プレイライト（初期オプションリクエスト）がサーバーの受け入れを検証します。 サーバーは、Access-Control-Allow-Methods、Access-Control-Allow-Headers、Access-Control-Max-Age、Access-Control-Request-Method、およびAccess-Control-Request-Headersヘッダーで応答します。クライアントは、
および

をプレフィラライトに送信します。

cors and canvas画像：

Access-Control-Allow-Origin キャンバスで外部画像を使用するには、サーバーがCORを有効にする必要があります（たとえば、サーバー構成でimg.setAttribute('crossOrigin', 'anonymous');を設定することで）。クライアント側のコードには

が必要です。 CORSがなければ、セキュリティ例外が発生します



crossorigin属性：

HTMLタグを使用して外部リソース（画像、スタイルシート、スクリプト）を取得すると、crossorigin属性はOriginヘッダーでCORSリクエストをトリガーします。 anonymous資格情報を省略します。 use-credentialsそれらを含む（サーバーサイドAccess-Control-Allow-Credentials: trueが必要）。

結論：

CORSは、オリジンクロスリソースアクセスを促進することにより、Web開発を大幅に強化します。 そのセキュリティへの影響を理解し、それを正しく実装することが重要です。

よくある質問（FAQ）：

FAQSセクションでは、CORに関する一般的な質問に対する詳細な回答、ヘッダーの目的、クッキーハンドリング、シンプルな対立リクエスト、サーバー側の構成、セキュリティリスク、HTTPリクエスト互換性、特定のヘッダーの役割、ブラウザの動作をカバーしています、テスト、およびCORSとJSONPの違い。 （元のFAQセクションは完全に保持されています。）

以上がCorsの詳細な外観の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。