クロスドメインを実現する最も簡単な方法: nginx リバース プロキシを使用する

クロスドメインとは何ですか? クロスドメインとは、ブラウザが他の Web サイトからのスクリプトを実行できないことを意味します。これは、ブラウザの同一生成元ポリシー (JavaScript に対してブラウザによって課されるセキュリティ制限) が原因で発生します。 いわゆる同一オリジンとは、ドメイン名、プロトコル、ポートが同じであることを意味します。ブラウザは JavaScript スクリプトを実行するときに、そのスクリプトがどのページに属しているかをチェックし、同じオリジンのページでない場合は実行されません。 同一生成元ポリシーの目的は、ハッカーによる犯罪行為を防ぐことです。たとえば、銀行アプリケーションでユーザーが Web ページをアップロードできる場合、同一生成元ポリシーがなければ、ハッカーはログイン フォームを作成して自分のサーバーに送信し、非常にハイエンドに見えるページを取得できます。ハッカーはこのページを電子メールなどでユーザーに送信します。ユーザーはこれをある銀行のメインページと誤ってログインし、ユーザーデータが漏洩します。また、ブラウザーの同一生成元ポリシーにより、ハッカーはフォーム データを受信できません。 現在、RESTFULの人気により、多くのアプリケーションがhttp/httpsインターフェイスを備えたAPIを提供し、xml/json形式を通じて外部にサービスを提供して、オープンアーキテクチャを実現しています。たとえば、Weibo、WeChat、天気予報、OpenStack などの Web サイトやアプリケーションはすべて、Restful インターフェイスを提供します。 Web アプリケーションも単一ページに向けて開発されています。 現在、このアーキテクチャを採用する Web アプリケーションが増えています: 静的な単一 Web ページajaxCallRESTFUL サービス さまざまな Web サイトによって提供される API を使用して、多くの素晴らしい Web アプリケーションを作成することもできます。ただし、ブラウザーが JavaScript を実行するときのクロスドメイン制限が、このタイプのオープン アーキテクチャの障害となっています。 この記事では、クロスドメインの問題を解決するためのシンプルかつ効果的な方法を提案します。 一般的に使用されるクロスドメイン方法 一般的に使用されるクロスドメイン方法には次のものがあります: 1. iFrame を使用して別のドメインにアクセスします。次に、別のページから iFrame のコンテンツを読み取ります。 jqueryなどのパッケージもいくつかあります。 Firefoxなどは別のiFrameのコンテンツの読み込みをサポートしていない可能性があると言われています。 2、jsonp。サーバーのサポートが必要です。スクリプト src を使用して Java コードを動的に取得します。これはコールバック ページのjs 関数 であり、パラメータは json オブジェクト です。 jquery にはカプセル化もあります。 3. http ヘッダー、Access-Control-Allow-Origin を設定します: *ただし、IE の一部のバージョンでは、この http ヘッダーが認識されないと言われています。 4、サーバープロキシ。たとえば、サーバーは URL 処理アクションを書き込みます。そのパラメータは URL です。このサーバーはパラメータを使用して URL を結合し、httpclient ライブラリを使用して URL を実行し、読み取ったコンテンツを http クライアントに出力します。 nginxリバースプロキシでクロスドメインを実現上記のクロスドメイン手法にはすべて、いくつかの問題があります。すべてのブラウザをサポートできないもの、JavaScript コードを変更する必要があるもの、サーバー側のコードを書き直す必要があるものがあります。セッションなどのシナリオで問題が発生する場合があります。 実際、nginx リバース プロキシを使用してクロスドメインを実現するのは、最も簡単なクロスドメイン方法です。クロスドメインの問題を解決するには、nginx の構成を変更するだけで済みます。nginx はすべてのブラウザーとセッションをサポートしており、コードを変更する必要はなく、サーバーのパフォーマンスには影響しません。 http/https リクエストを複数の実サーバーに転送するには、nginx を設定し、1 つのサーバー上で複数のプレフィックスを設定するだけです。このようにして、このサーバー上のすべての URL は同じドメイン名、プロトコル、およびポートを持ちます。したがって、ブラウザーの場合、これらの URL は同じ起源のものであり、クロスドメインの制限はありません。そして実際には、これらの URL は物理サーバーによって提供されています。これらのサーバー内の JavaScript は、ドメイン全体でこれらすべてのサーバー上の URL を呼び出すことができます。 以下に、クロスドメインをサポートする nginx の例を示し、詳細な説明を行います。 たとえば、pythonflask で開発された 2 つのプロジェクト、testFlask1 と testFlask2 があります。 testFlask2 プロジェクトの JavaScript スクリプトは、データを取得するために ajax を介して testFlask1 の URL を呼び出す必要があります。 通常の展開では、クロスドメインの問題が発生し、ブラウザは次のような呼び出しの実行を拒否します。

1

2

3

4

5

$("button").click(function() {

    $.get("127.0.0.1:8081/partners/json"、 functionfunction(result) {

        $("div").html(result);

(result) {🎜🎜🎜🎜 🎜🎜$(🎜 });    });

});

});🎜testFlask2プロジェクトのjavascripファイルを変更してみましょう。こうすることで、同じオリジンから URL にアクセスするときにクロスドメインの問題は発生しません。

1

2

3

4

5

$("button").click(function() {

    $.get("partners/json"、 関数function(result) {

(結果) {🎜🎜

        $("div").html(result);

});    });

});

});🎜しかし、実際にはtestFlask2プロジェクトにはpartners/jsonのようなURLがないので、どう対処すればよいでしょうか？ 次のように nginx 設定ファイルを書きます: 1

2

3

4

5

6

7

8

9

10

11

12

サーバー{

server{

  listen8000;

  

listen8000;    includeuwsgi_params;

    uwsgi_passunix:/tmp/testFlask2.sock;

🎜🎜 🎜🎜場所/ {🎜🎜🎜🎜 🎜🎜インクルードuwsgi_params;🎜🎜🎜🎜 🎜🎜uwsgi_passunix:/tmp/testFlask2.sock;🎜🎜

  }

   }

    

場所/パートナー {

    includeuwsgi_params;

    uwsgi_passunix:/tmp/testFlask1.sock;

🎜 🎜🎜rewrite^.+partners/?(.*)$ /$1 休憩;🎜🎜🎜🎜 🎜🎜uwsgi_params を含めます;🎜🎜🎜🎜 🎜🎜uwsgi_passunix:/tmp/testFlask1.sock;🎜🎜

}  }

}

}🎜testFlask2プロジェクトをポート8080のルートディレクトリにデプロイしました。 Web サービスを提供する testFlask1 プロジェクトを /partners ディレクトリにデプロイします。 しかし、testFlask1 プロジェクトは /partners/json のような URL リクエストを処理できません。それではどうすればいいでしょうか？ このコマンドを書き換えることにより、^.+partners/?(.*)$ /$1 Break; nginx は、受信したすべての /partners/* リクエストを /* リクエストに変換し、その背後にある実際の Web サーバーに転送できます。 このように、RESTFUL の ajax クライアント プログラムは、サーバーが提供する RESTFUL インターフェイスを呼び出すために、特定のプレフィックスを付けた URL を与えるだけで済みます。 nginxのリバースプロキシを介しても、他社が開発したWebサイトが提供するRESTFULインターフェースを呼び出すことができます。 など、

1

2

3

4

5

location/sohu {

   rewrite^.+sohu/?(.*)$ /$1 休憩;

  includeuwsgi_params;

  proxy_passhttp://www.sohu.com/;

🎜🎜🎜include🎜uwsgi_params;🎜🎜🎜🎜 🎜🎜proxy_passhttp://www.sohu.com/;🎜🎜

}

sohuのウェブサイト全体を8080:/sohu/ディレクトリに移動し、javascriptはそのRESTFULサービスを自由に呼び出すことができます。 ちなみに、^.+sohu/?(.*)$ /$1 Break; と書き換えます。 このコマンドでは、$1 が (.*) の部分を表します。最初のペア () のパラメータは $1、2 番目のペア () のパラメータは $2 などとなります。 まとめ この記事では、nginxのリバースプロキシ機能を利用して、あらゆるアプリケーションやWebサイトへのクロスドメインアクセスを実現する方法を紹介します。 nginx は、リバース プロキシ サーバーとして一般的に使用される高性能 Web サーバーです。リバース プロキシ サーバーとして、nginx は http リクエストを別のサーバーまたは一部のサーバーに転送します。 クロスドメイン アクセスは、ローカル URL プレフィックスを Web サーバーにマッピングして、クロスドメインでアクセスできるようにすることで実現できます。 ブラウザの場合、アクセスするのは同じオリジンサーバー上のURLです。そして、nginx は URL プレフィックスを検出することで、http リクエストを背後の実際の物理サーバーに転送します。そして、rewrite コマンドを通じてプレフィックスを削除します。こうすることで、実サーバーはリクエストがプロキシ サーバーからのものであることを認識せずにリクエストを正しく処理できます。 簡単に言うと、nginx サーバーはブラウザを騙して同一発信元の呼び出しであると思わせ、それによってブラウザのクロスドメインの問題を解決します。 URL を書き換えることで、実際のサーバーを欺き、http リクエストがユーザーのブラウザから直接送信されたものであると認識させます。 このように、クロスドメインの問題を解決するには、nginx 構成ファイルを変更するだけで済みます。シンプル、強力、そして効率的!

上記では、nginx リバース プロキシを使用してクロスドメインを実現する最も簡単な方法を内容の側面も含めて紹介しました。PHP チュートリアルに興味のある友人に役立つことを願っています。