Apache クロスドメイン リソース アクセス エラーの解決策

多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など) を独立したサーバーまたは CDN に配置し、独立したリソース ドメイン名 (res.test.com など) を使用して、静的リソースを分散し、アクセスを高速化し、メイン サイトへの負荷を軽減します。

ただし、実際の展開では、ブラウザはこれらの異なるドメイン名からリソースを読み込むことができず、Firefox コンソールにエラーが報告されます。

<span role="presentation" class="objectBox objectBox-errorMessage "><span class="errorMessage ">クロスオリジン リクエストがブロックされました: 同一オリジン ポリシーにより、http://xxxxx のリモート リソースの読み取りは許可されません。 (理由: CORS ヘッダーに 'Access-Control-Allow-Origin' がありません)。 </span></span>

クロスオリジン リクエストがブロックされました: 同一オリジン ポリシーにより、http://xxxxx のリモート リソースの読み取りが禁止されています。 (理由: CORS リクエストが失敗しました)。

これは、最新のブラウザがこれをクロスオリジン リソースとして定義し、読み込みを許可しないためです。

クロスドメインを理解するには、まず同一オリジンポリシーを理解する必要があります。同一オリジンポリシーは、セキュリティ上の理由からブラウザに実装されている非常に重要なセキュリティポリシーです。

相同性とは何ですか?

URL は、プロトコル、ドメイン名、ポート、パスで構成されます。2 つの URL のプロトコル、ドメイン名、ポートが同じである場合、それらの URL のオリジンは同じです。

同一オリジンポリシー:

ブラウザの同一オリジンポリシーは、異なるオリジンの「ドキュメント」またはスクリプトが現在の「ドキュメント」の特定のプロパティを読み取ったり設定したりすることを制限します。 （ホワイトハットがウェブセキュリティについて語る[1]）
あるドメインからロードされたスクリプトは、別のドメインのドキュメント プロパティにアクセスできません。

鍵となるのは、それをどう解決するかです。実際、それは非常に簡単です。静的リソース サーバーにヘッダー情報を追加するだけです。

アクセス制御許可オリジン *

この記事では操作にApacheを使用していますが、nginxも同様です

まずhttpd.confを編集します

この行を見つける

#LoadModule headers_module modules/mod_headers.so

#コメント文字を削除します

LoadModule headers_module modules/mod_headers.so

目的はApacheヘッダー情報カスタムモジュールを有効にすることです

次に、独立したリソースドメイン名の仮想ホストに行を追加します。

Header set Access-Control-Allow-Origin *

これは、このドメイン名のリソースにアクセスするときにヘッダーを追加することを意味します。

Apacheを再起動します

またお越しくださいね！

名前仮想ホスト 10.0.0.2:80
<仮想ホスト 10.0.0.2:80>
  ドキュメントルート /var/www/host.example.com
  サーバー名 host.example.com
  JkMount /webapp/* jkworker
  ヘッダーが Access-Control-Allow-Origin "*" に設定されます
  RewriteEngineオン
  書き換えルール ^/otherhost http://otherhost.example.com/webapp [R,L]
</仮想ホスト>

2 番目の Apache 設定の例を次に示します。

名前仮想ホスト 10.0.1.2:80
<仮想ホスト 10.0.1.2:80>
  ドキュメントルート /var/www/otherhost.example.com
  サーバー名 otherhost.example.com
  JkMount /webapp/* jkworker
  ヘッダーが Access-Control-Allow-Origin "*" に設定されます
</仮想ホスト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。