nginx がクロスドメインの問題を解決する方法

Nginx を使用してフロントエンドのクロスドメインの問題を解決するにはどうすればよいですか?

まえがき

静的ページや Vue に似たアプリケーションを開発する場合、多くの場合、いくつかのインターフェイスを呼び出します。これらのインターフェイスはクロスドメインである可能性が高く、ブラウザ クロスオリジンの問題は報告されますが、調整は行われません。

最も簡単な解決策は、セキュリティの問題を無視するようにブラウザを設定し、--disable-web-security を設定することです。ただし、この方法は PC ページを作成する場合には問題ありませんが、モバイル ページの場合は機能しません。

解決策

Nginx を使用してリクエストを転送します。クロスドメイン インターフェイスをローカル ドメインのインターフェイスとして書き込み、これらのインターフェイスを実際の要求アドレスに転送します。

例を挙げてください

たとえば、私たちは Vue アプリケーションを開発しています。

原文:

デバッグ ページ: http://192.168.1.100:8080/

要求されたインターフェイス: http:// ni .hao.sao/api/get/info

ステップ 1:

要求されたインターフェイスは次のとおりです: http://192.168.1.100:8080/api/get / info

PS: これにより、クロスドメインの問題が解決されました。

ステップ 2:

Nginx をインストールした後、/usr/local/etc/nginx/ ディレクトリ (これは Mac の場合) に移動し、nginx.conf を変更します。ファイル 。

ステップ 3:

デフォルトのサーバー構成をコメントアウトします。

以下を追加します:

   server{
        listen 8888;
        server_name  192.168.1.100;
 
        location /{
            proxy_pass http://192.168.1.100:8080;
        }
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

保存後、Nginx を起動します。

PS: Nginx の構成について詳しく知る必要はありません。非常に簡単です。

ステップ 4:

アクセス: http://192.168.1.100:8888/

完了しました。

PS: アクセスされたポートは「8888」であることに注意してください。他のドメインにアドレスがある場合は、場所の追加を続けてください。

エラーデモ

最初はNginxの構成がよくわからなかったので、次のようにすればよいのではないかと考えました。

    server{
        listen 8080;
        server_name  192.168.1.100;
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

これを書いた理由は、Nginx を使用して 8080 リクエストを監視し、一致するリクエストのみを転送できるようになると思うからです。私が気づかなかったのは、これを書いた後、Nginx はポート 8080 を占有する必要があるということです。

ポートを占有する必要があるため、同じプロトコルを使用する他のプロセスがポートを占有することができなくなり、その結果、開発されたページをポート 8080 で有効にすることができなくなります。同僚に言われてこのことを思い出し、考え方を変えて一番上の方法を思いつきました。

概要

実際、これは開発中やデバッグ中だけでなく、運用環境でも行うことができます。 Nginx を使用してリクエストを転送した後、デプロイされる静的ページをリクエスト インターフェイスと同じドメインに配置する必要はありません。

付録

リクエストに問題があり、それが Nginx によって報告されたエラーであることがわかった場合は、Nginx の error.log を見つけるだけで済みます。理由を知っています。

前提条件は、nginx.conf で error.log を設定することです:

error_log  logs/error.log;

Mac 上の error.log の場所:

/usr/local/Cellar/nginx/1.15.8/logs/error.log

Nginx 関連の知識の詳細については、次のサイトを参照してください。 Nginx の使い方チュートリアル コラム!

以上がnginx がクロスドメインの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。