この記事では、Nginx がクロスドメイン アクセスを実装する方法を紹介します。 Nginx のクロスドメイン アクセスの実装には一定の参考値がありますので、困っている方は参考にしていただければ幸いです。
クロスドメインとは、あるドメイン名の Web ページから別のドメイン名のリソースを要求することを指します。たとえば、www.a.com ページから www.b.com のリソースをリクエストします。
#ブラウザは通常、デフォルトでクロスドメイン アクセスを禁止しています。安全ではないため、CSRF (クロスサイト リクエスト フォージェリ) 攻撃を受けやすいです。
Nginx は Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow などの HTTP を追加します-Headers など ブラウザのキャッシュを制御するためのヘッダ情報。
"Access-Control-Allow-Origin" クロスドメイン リクエストの開始を許可する Web サイトを設定します。
"Access-Control-Allow-Methods" クロスドメイン リクエストの開始を許可する HTTP メソッドを設定します。ドメイン リクエスト
「Access -Control-Allow-Headers」設定により、クロスドメイン リクエストに Content-Type ヘッダーを含めることができます
Syntax: add_header name value [always]; Default: — Context: http, server, location, if in location
# 配置网站www.a.com server { server_name www.a.com; root /vagrant/a; # 允许 http://www.b.com 使用 GET,POST,DELETE HTTP方法发起跨域请求 add_header Access-Control-Allow-Origin http://www.b.com; add_header Access-Control-Allow-Method GET,POST,DELETE; } # 配置网站www.b.com server { server_name www.b.com; root /vagrant/b; } # 配置网站www.c.com server { server_name www.c.com; root /vagrant/c; }
/vagrant/a/a.txt
, /vagrant/b/index.html
, ## を作成します。 #/vagrant/c/index .html ファイル
#
Hello,I'm a!
nbsp;html> <meta> <title>Ajax跨站访问b</title> <h1>Ajax跨站访问b - </h1> <script></script> <script> $(function(){ $.ajax({ url: "http://www.a.com/a.txt", type: "GET", success: function (data) { $('h1').append(data); }, error: function (data) { $('h1').append('请求失败!'); } }); }) </script>
nbsp;html> <meta> <title>Ajax跨站访问c</title> <h1>Ajax跨站访问c - </h1> <script></script> <script> $(function(){ $.ajax({ url: "http://www.a.com/a.txt", type: "GET", success: function (data) { $('h1').append(data); }, error: function (data) { $('h1').append('请求失败!'); } }); }) </script>4. クライアントのホスト ファイルを構成します (実際のドメイン名を使用する場合は、無視できます)
/etc/hosts
次のコンテンツを追加して保存します (192.168.33.88 は作成者の仮想マシンの IP です。自分の IP に置き換えてください): <pre class="brush:php;toolbar:false">192.168.33.88 www.a.com
192.168.33.88 www.b.com
192.168.33.88 www.c.com</pre>
http://www.b.com/index.html
および
#http://www.b.com/index.html
Ajax跨站访问b - Hello,I'm a!
Ajax跨站访问c - 请求失败!
Failed to load http://www.a.com/a.txt: The 'Access-Control-Allow-Origin' header has a value 'http://www.b.com' that is not equal to the supplied origin. Origin 'http://www.c.com' is therefore not allowed access.でエラーを見つけてください。 おすすめの関連記事:
ブラウザを制御する静的リソース Web サービスとしての Nginxキャッシュとリーチ防止の実装
静的リソース Web サービスとしての Nginx と静的リソース圧縮
以上がNginx はクロスドメイン アクセスをどのように実装しますか? Nginxクロスドメインアクセスの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。