Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明

Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明

フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので、ここでまとめておきます。

この記事では、Ngnx を使用してクロスドメインの問題を解決する方法についてのみ説明し、原則については説明しません。

1. まず、Windows環境でのNignxの関連コマンド操作を紹介します。

一般的な nginx コマンド:

  • 設定が正しいことを確認します: nginx -t
  • Nginxのバージョン番号を確認します: nginx -V
  • Nginxを起動します: nginxを起動します
  • Nginx をすぐに停止またはシャットダウンします: nginx -s stop
  • Nginx を通常どおり停止またはシャットダウンします: nginx -s quit
  • 設定ファイルの変更リロードコマンド: nginx -s reload

nginxを停止すると、/logsディレクトリのnginx.pidは自動的に削除されます。

  • nginx -c conf/nginx.confコマンドを使用してnginxを再作成または再起動することができます。

nignxリスニングポートが正常に起動されているかどうかを確認します

  • netstat -ano | findstr ポート番号

解決策: nignxを閉じた後もポートは引き続きリッスンしています

1. netstat -ano | findstr ポート番号#PID を取得

2. tasklist | findstr "PID" #nginx プロセス情報を検索するコマンド

3. taskkill /f /t /im nginx.exe #nginxプロセスを終了します

2. クロスドメイン問題を解決するためにNignxを設定する方法を紹介します

フロントエンド IP ポート番号: http://localhost:8080/

バックエンド IP ポート番号: http://localhost:8082/

クロスドメインを設定していない場合、フロントエンドのリクエストは次のようになります。

uni.リクエスト({
  url:'http://localhost:8082/ApiController/test',
  成功:(res)=>{
  コンソールログ(res.data)
  },
})

アクセスアドレス: 'http://localhost:8082/ApiController/test' と表示されます

次にNignxを設定します

/config/nginx.confのこのファイルを編集します

1) nginx.conf設定ファイルのhttpブロックにヘッダー情報を追加し、クロスドメインアクセス設定を追加します。

add_header Access-Control-Allow-Origin *; // すべてのドメイン名がドメイン間でプロキシ アドレスにアクセスできるようにします。add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET; //クロスドメインリクエストアクセスリクエストメソッド、

2) リバースプロキシを設定する

サーバー{
  listen 80; #nignx のリスニング ポートを設定します server_name localhost; #nignx のリスニング アドレスを設定します location /ApiController{ #リスニング アドレスは /ApiController で始まります proxy_pass http://localhost:8082; #転送アドレス}
}

設定後、フロントエンドのアクセスURL

http://localhost:8082/ApiController/test を http://localhost:80/ApiController/test に変更する必要があります。

#現時点での監視

ドメイン名としてlocalhostを使用する

ポート80を使用する

アドレスは/ApiControllerで始まります

アドレス転送が実行されます

uni.リクエスト({
   url:'http://localhost:80/ApiController/test',
   成功:(res)=>{
   コンソールログ(res.data)
   },
})

結果: (アクセス成功)

要約する

Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題を解決する方法について説明したこの記事はこれで終わりです。Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題を解決する方法についての関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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

<<:  CSS3アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例

>>:  MySQL ロック制御同時実行方法

推薦する

HTMLは角丸四角形を簡単に実装します

質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...

vue+element テーブルで動的な列フィルタリングを実装するためのサンプルコード

要件: データをリスト形式で表示する場合、表示すべき情報項目が多く、表が横に長くなってしまいます。表...

docker を使用して Kong クラスター操作を構築する

docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...

Vue2.0/3.0双方向データバインディングの実装原理の詳細説明

Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更...

Macにmysql5.7.18をインストールする詳細な手順

1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...

Reactを使用する際の7つの落とし穴のまとめ

目次1. コンポーネントの肥大化2. 状態を直接変更する3. プロパティは数値を渡す必要があるが文字...

Docker Nginxコンテナの制作と展開の実装方法

クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...

JS でカルーセル効果を実現する 3 つの簡単な方法

この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容...

Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...

HTTP ステータス コード

このステータス コードは、リクエストのステータスに関する情報を提供し、サイトとリクエストされたページ...

JavaScript における BOM と DOM の詳細な説明

目次BOM (ブラウザ オブジェクト モデル) 1. ウィンドウブラウザのウィンドウサイズを取得する...

react-navigation6.xルーティングライブラリの基本的な使い方の詳しい説明

目次react-nativeプロジェクトの初期化react-nativeプロジェクトをインストールす...

CSS3 すりガラス効果

すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...

CSSを使用して特別なロゴやグラフィックを実装する

1. はじめに画像は多くのスペースを占め、画像の数が増えるほど管理が難しくなるため、シンプルなラベル...

Vue はウェブページの言語切り替えの国際化を実装します

1. 基本的な手順1: yarn add vue-i18nをインストールするこのパスに新しい .js...