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 ロック制御同時実行方法

推薦する

MySQL クエリ キャッシュのグラフィカルな説明

目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...

Nginx Httpモジュールシリーズにおけるautoindexモジュールの具体的な使用法

ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...

DockerにRedisをインストールし、パスワードを設定して接続する方法

Redis は分散キャッシュ サービスです。キャッシュは、大規模システムの開発やパフォーマンスの最適...

CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...

JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。

目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...

TinyEditorはシンプルで使いやすいHTML WYSIWYGエディタです

数日前、国産の XHTML エディタを紹介しました。今日は、有名な海外の Web デザイン ブログl...

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

CSSセレクターでの正規表現の使用

はい、CSS にも正規表現があります (アーメン) CSS で目立つための 2 つの強力なツール: ...

HTML チュートリアル: HTML 水平線分

<br />このタグを使用すると、画面上に水平線を表示して、ページのさまざまな部分を区切...

MySQL の一般的な問題とアプリケーション スキルの概要

序文MySQL の日常的な開発やメンテナンスでは、パスワードの紛失やテーブルの破損など、避けられない...

nginx+php実行リクエストの動作原理の詳細な説明

PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...

サイト全体を灰色にするCSSコードのまとめ

国務院は本日、新型コロナウイルス感染症との闘いで殉教した方々と犠牲者に対し、全国各民族人民の深い哀悼...

Dockerが独自のローカルイメージリポジトリを構築するための手順

1. 環境と準備1. Ubuntu 14.04 2.Docker環境2. 建設プロセス1. ミラーソ...