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:

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

以下に追加:

  サーバ{
    聞く 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • フロントエンドに必要なNginx設定の詳細な説明
  • フロントエンド開発のための Nginx 構成 (シナリオ)
  • $remote_addr に基づく nginx フロントエンド配布方法の詳細な説明
  • nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法
  • Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明
  • フロントエンドでnginxが何ができるかの詳細な説明

<<:  MYSQLは時間(年、月、日)フィールドを変更されていない時間、分、秒に置き換えます。分析例

>>:  フロントエンドコンポーネント化の基礎知識を詳しく解説

推薦する

Nginx で Http、Https、WS、WSS を設定する方法

前面に書かれた今日のインターネット分野では、Nginx は最も広く使用されているプロキシ サーバーの...

デスクトップ仮想化を実現するために Hyper-V を展開する手順 (グラフィック チュートリアル)

Hyper-V を展開するためのハードウェア要件は次のとおりです。 64 ビット プロセッサ、具体...

Vue router-viewとrouter-linkの実装原理

使用 <div id="アプリ"> <router-link ...

JavaScript の例におけるループの使用法の詳細な説明

退屈だったので、ループに関する簡単な演習をいくつかまとめてみました。JS を学び始めたばかりの方に役...

JavaScript オブジェクト (詳細)

目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...

このようなシェル スクリプトを使用して、多数の MySQL データベースを強制終了します (推奨)

朝早くに電話で起こされました。あるプロジェクトのデータベースがダウンしていて起動できないとのことでし...

中国語フォントの英語名まとめ

CSS の font-family プロパティを使用して中国語フォントを参照する場合、フォントを定義...

Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定

Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...

Vue 開発ツリー構造コンポーネント (コンポーネント再帰)

この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は...

JSはjQueryのappend関数を実装します

目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...

MySQL 数十億のデータのインポート、エクスポート、移行に関するメモ

最近はMySQLのメモをたくさん取っていますが、それは主に会社のOracleが比較的安定していてメン...

Docker でタイムゾーンの問題に対処する方法

背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...

ページの下部にHTMLフッターを配置する簡単な方法

要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下...

フォームにファイルをアップロードした後にアクションを保存するよう促す理由と解決策

jsonデータはhtml形式で返される必要がありますつまり、 response.setContent...

Docker コンテナ ソース コードのデプロイ httpd ストレージ ボリュームを使用して Web サイトをデプロイする (推奨)

目次Dockerコンテナのソースコードを使用してhttpdをデプロイし、ストレージボリュームを使用し...