フロントエンドのクロスドメイン問題に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アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例
質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...
要件: データをリスト形式で表示する場合、表示すべき情報項目が多く、表が横に長くなってしまいます。表...
docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...
Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更...
1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...
目次1. コンポーネントの肥大化2. 状態を直接変更する3. プロパティは数値を渡す必要があるが文字...
クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...
この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容...
目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...
このステータス コードは、リクエストのステータスに関する情報を提供し、サイトとリクエストされたページ...
目次BOM (ブラウザ オブジェクト モデル) 1. ウィンドウブラウザのウィンドウサイズを取得する...
目次react-nativeプロジェクトの初期化react-nativeプロジェクトをインストールす...
すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...
1. はじめに画像は多くのスペースを占め、画像の数が増えるほど管理が難しくなるため、シンプルなラベル...
1. 基本的な手順1: yarn add vue-i18nをインストールするこのパスに新しい .js...