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 をよろしくお願いいたします。