nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明

nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明

1. Apache 静的リソースのクロスドメイン アクセス

Apache設定ファイルhttpd.confを見つける

この行を見つける

#LoadModule headers_module modules/mod_headers.so

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

LoadModule headers_module modules/mod_headers.so

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

スタンドアロンホスト構成ファイルに新しいヘッダーを追加する

Header set Access-Control-Allow-Origin *

例えば:

<仮想ホスト *:88>
 サーバー管理者 [email protected]
 ドキュメントルート "****************"
 サーバー名 www.jb51.com
 ヘッダーセット Access-Control-Allow-Origin *

 エラーログ "***********"
 CustomLog "****************************" 共通
<ディレクトリ "*************">
 SetOutputFilter DEFLATE
 オプション FollowSymLinks ExecCGI
 すべて許可が必要
 すべて上書きを許可
 許可、拒否の命令
 すべて許可
 ディレクトリインデックス index.html index.php
</ディレクトリ>
</仮想ホスト>
Apacheコピー

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

Apacheを再起動します

service httpd restart

2. nginxの静的リソースはクロスドメインアクセスを可能にする

同様に、対応するドメイン名設定ファイルを見つけます。

サーバー モジュールに構成を追加します。

add_header 'Access-Control-Allow-Origin' '*';

例:

サーバー{
    聞く 80;
    add_header 'Access-Control-Allow-Origin' '*';
    場所 /Roboto/ {
      ルート /home/images;
      自動インデックスオン;
    }
  }

nginx のリロード

./nginx -s reload

上記の方法で設定すると、ドメイン間で静的リソースにアクセスする際に問題がなくなります。

上記は、nginx / apacheの静的リソースへのクロスドメインアクセスを可能にするソリューションです。

以下もご興味があるかもしれません:
  • Linux サーバー上のローカル静的リソースにアクセスするために nginx を使用する方法
  • 動的データと静的リソースのリクエストを分離するための Nginx + Tomcat の詳細な説明
  • nginx静的リソースサーバーの簡単な設定の詳細説明
  • Nginxは静的リソースのリバースプロキシの例を実装します
  • nginx-http-concat モジュールを使用して、nginx で静的リソース ファイルをマージします。
  • nginxで静的リソースを公開する方法

<<:  MySQL データベースの Binlog 使用法の概要 (必読)

>>:  JavaScript は setTimeout を使用してカウントダウン効果を実現します

推薦する

Docker クロスホストネットワーク (オーバーレイ) の実装

1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...

ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...

M1 ProチップでVueプロジェクトを開始する方法

目次導入Homebrewをインストールするnvmをインストールするノードをインストールするインストー...

Win7 インストール MySQL 5.6 チュートリアル図

目次1. ダウンロード2. インストール3. my.ini ファイルを設定する(デフォルトのエンコー...

MySQL infobrightのインストール手順

目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...

LinuxベースのSelenium環境を構成し、操作を実装する

1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...

Vue3でelement-plusを使用する方法の詳細な説明

目次1. インストール2. main.jsにインポートする3. 使用Vue3がリリースされてからしば...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

Nexus を使用して jar パッケージをプライベート サーバーに追加する方法

なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...

nginx クッキーの有効期間に関する議論の要約

訪問するたびにブラウザにCookieが生成されますが、 Cookieの存在はユーザーにとって良いこと...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

Linux で cmake を使用して MySQL をコンパイルおよびインストールするための詳細なチュートリアル

1. cmakeをインストールする1. cmakeの圧縮パッケージを解凍する [root@mysql...

React は入力値を取得し、2 つのメソッドの例を送信します

方法1: DOMが提供するイベントオブジェクトのターゲットイベント属性を使用して値を取得し、送信する...

ネイティブ js でカスタム難易度のマインスイーパ ゲームを実装する

この記事の例では、マインスイーパゲームを実装するためのjsの具体的なコードを参考までに共有しています...