フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので、ここでまとめておきます。 この記事では、Ngnx を使用してクロスドメインの問題を解決する方法についてのみ説明し、原則については説明しません。 1. まず、Windows環境でのNignxの関連コマンド操作を紹介します。 一般的な nginx コマンド:
nginxを停止すると、/logsディレクトリのnginx.pidは自動的に削除されます。
nignxリスニングポートが正常に起動されているかどうかを確認します
解決策: 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS3アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例
目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...
ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...
Redis は分散キャッシュ サービスです。キャッシュは、大規模システムの開発やパフォーマンスの最適...
この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...
目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...
数日前、国産の XHTML エディタを紹介しました。今日は、有名な海外の Web デザイン ブログl...
これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...
CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...
1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...
はい、CSS にも正規表現があります (アーメン) CSS で目立つための 2 つの強力なツール: ...
<br />このタグを使用すると、画面上に水平線を表示して、ページのさまざまな部分を区切...
序文MySQL の日常的な開発やメンテナンスでは、パスワードの紛失やテーブルの破損など、避けられない...
PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...
国務院は本日、新型コロナウイルス感染症との闘いで殉教した方々と犠牲者に対し、全国各民族人民の深い哀悼...
1. 環境と準備1. Ubuntu 14.04 2.Docker環境2. 建設プロセス1. ミラーソ...