Nginx はクロスドメイン アクセスをどのように実装しますか? Nginxクロスドメインアクセスの実装

この記事では、Nginx がクロスドメイン アクセスを実装する方法を紹介します。 Nginx のクロスドメイン アクセスの実装には一定の参考値がありますので、困っている方は参考にしていただければ幸いです。

1. クロスドメインとは

クロスドメインとは、あるドメイン名の Web ページから別のドメイン名のリソースを要求することを指します。たとえば、www.a.com ページから www.b.com のリソースをリクエストします。

#ブラウザは通常、デフォルトでクロスドメイン アクセスを禁止しています。安全ではないため、CSRF (クロスサイト リクエスト フォージェリ) 攻撃を受けやすいです。

2. Nginx はブラウザを制御してクロスドメイン アクセスを許可します

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 ヘッダーを含めることができます

ngx_http_headers_module

構文

Syntax:    add_header name value [always];
Default:    —
Context:    http, server, location, if in location

アプリケーション例

1. vim conf.d/cross_site.conf

# 配置网站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;
}

2. nginx -s reload リロードnginx 設定ファイル

3. /vagrant/a/a.txt, /vagrant/b/index.html, ## を作成します。 #/vagrant/c/index .html ファイル

##vim /vagrant/a/a.txt

• #

  Hello,I'm a!

/vagrant/b/index.html

• 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) {
                  $(&#39;h1&#39;).append(data);
              },
              error: function (data) {
                  $(&#39;h1&#39;).append(&#39;请求失败！&#39;);
              }
          });
      })
      </script>
  

#/vagrant/c/index.html

• 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) {
                  $(&#39;h1&#39;).append(data);
              },
              error: function (data) {
                  $(&#39;h1&#39;).append(&#39;请求失败！&#39;);
              }
          });
      })
      </script>
  

  4. クライアントのホスト ファイルを構成します (実際のドメイン名を使用する場合は、無視できます)

windows: C:\Windows\System32\drivers\ etc\hosts

linux:

/etc/hosts
次のコンテンツを追加して保存します (192.168.33.88 は作成者の仮想マシンの IP です。自分の IP に置き換えてください): <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>

5. ブラウザは

http://www.b.com/index.html

および

http:// にアクセスします。それぞれ www.c.com/index.html#http://www.b.com/index.html

Ajax跨站访问b - Hello,I'm a!

http://www.c .com/index.html

Ajax跨站访问c - 请求失败！

ブラウザの開発者モード コンソールを開くと、次のこともできます。ページ http://www.c.com/index.html:

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 サイトの他の関連記事を参照してください。