「Access-Control-Allow-Origin」ヘッダーはどのようにしてクロスオリジンリソース共有 (CORS) を有効にしますか?

CORS の「Access-Control-Allow-Origin」ヘッダーをわかりやすく説明する

クロスオリジン リソース共有 (CORS) により、1 つのオリジンからロードされた JavaScript コードがリソースにアクセスできるようになります別の起源から。 「Access-Control-Allow-Origin」ヘッダーがこのクロスオリジン アクセスをどのように容易にするかを理解することが重要です。

「Access-Control-Allow-Origin」の仕組み

クライアントがリクエストしたとき異なるオリジンからのリソースに対して、サーバーは「Access-Control-Allow-Origin」ヘッダーで応答できます。このヘッダーは、リソースへのアクセスを許可されるオリジンを指定します。デフォルトの動作では、すべてのクロスオリジン要求が拒否されます。

クロスオリジン アクセスを有効にするには、サーバーは応答に「Access-Control-Allow-Origin」ヘッダーを追加する必要があります。このヘッダーの値は、特定のドメイン (例: 「http://siteB.com」) または「*」のいずれかで、どのオリジンでもリソースへのアクセスが許可されていることを示します。

非単純な処理リクエスト

通常、GET や POST 以外の HTTP メソッド、または非標準リクエスト ヘッダーが含まれる単純でないリクエストの場合、ブラウザは最初にプリフライト OPTIONS を送信します。 リクエスト。このリクエストは、サーバーが意図したリクエストを受け入れるかどうかを検証します。

サーバーが適切な 'Access-Control-Allow-Headers' および 'Access-Control-Allow-Methods' ヘッダーを使用して OPTIONS リクエストに応答した場合、ブラウザは実際のリクエストを処理します。

使用例

次のことを考慮してください。シナリオ:

サイト A: https://siteA.com
サイト B: https://siteB.com

へサイト A からダウンロードした JavaScript コードを有効にして、サイト B のリソースにアクセスします:

1. サイトA: サイト B:

fetch('https://siteB.com/myCode.js')
  // ...

2. サイト B: から JavaScript コードを取得します。「Access-Control-」で「myCode.js」を提供します。許可 - 原点header:

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

3. JavaScript (サイト A): JavaScript コードはサイト B:

fetch('https://siteB.com/api/data')
  // ...

「Access-Control-Allow-Origin」ヘッダーがどのように機能するかを理解することで、クロスオリジン リソースを効果的に有効にすることができます共有し、JavaScript コードがさまざまな生成元のリソースにシームレスにアクセスできるようにします。

以上が「Access-Control-Allow-Origin」ヘッダーはどのようにしてクロスオリジンリソース共有 (CORS) を有効にしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。