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:

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

以下に追加:

  サーバ{
    聞く 8888;
    サーバー名 192.168.1.100;
 
    位置 /{
      プロキシパス http://192.168.1.100:8080;
    }
 
    場所 /api{
      proxy_pass http://ni.hao.sao/api;
    }
  }

保存したら、Nginx を起動します。

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

ステップ4:

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

終わり。

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

エラーのデモンストレーション

最初はNginxの設定がよくわからなかったので、次のように設定できると思いました。

  サーバ{
    8080を聴く;
    サーバー名 192.168.1.100;
 
    場所 /api{
      proxy_pass http://ni.hao.sao/api;
    }
  }

これを書いた理由は、これにより Nginx が 8080 のリクエストをリッスンし、一致するリクエストのみを転送できるようになると考えたからです。私が気付いていなかったのは、Nginx をこのように記述した後、ポート 8080 を占有する必要があるということでした。

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

要約する

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。