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は時間(年、月、日)フィールドを変更されていない時間、分、秒に置き換えます。分析例

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

推薦する

Windows システムに mysql5.7.21 をインストールするための詳細なチュートリアル

MySQL インストーラーは、MySQL ソフトウェアのあらゆるニーズに対応する、使いやすいウィザー...

シェルスクリプトはNginxのaccess.logのPVを定期的にカウントし、APIに送信してデータベースに保存します。

1. PVとIPの統計一日のPV(ページビュー)をカウントする cat access.log | ...

docker-maven-plugin の詳細な使用方法

目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...

MySQLストアドプロシージャを変更する詳細な手順

序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...

HTMLデザインパターンの日々の勉強ノート

HTML デザインパターン学習ノート今週は主にHTMLデザインパターンを学びました。学習内容をまとめ...

Linux の非常に詳細な gcc アップグレード プロセス

目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...

文字列の GBK および GB2312 エンコードとデコードのフロントエンド実装 (概要)

序文プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラ...

純粋な CSS カスタム複数行省略記号の問題 (原理から実装まで)

テキストオーバーフローを表示するにはどうすればいいですか? どのようなニーズがありますか?単一行です...

CSS3 シンプルカットカルーセル画像実装コード

実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...

Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する

実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...

WeChat ミニプログラム ユーザー認証のベストプラクティス ガイド

序文WeChat アプレットを開発する際には、ユーザーの権限が必要なページを使用する必要があることが...

MySQL でストリーミングクエリを使用してデータ OOM を回避する

目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...

Linux の MySQL でリモート接続を承認する方法

注意: 他のマシン (IP) は、承認なしではクライアント経由で MySQL データベースに接続でき...

Brotli圧縮アルゴリズムを有効にするNginxの実装プロセスの詳細な説明

序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...

html リンク タグ タイトル属性 改行 マウス ホバー プロンプト コンテンツ 改行効果

オブジェクト上にマウスを移動したときにコンテンツ(タイトル属性の内容)を折り返す方法、HTML タイ...