序文 Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインターフェースを呼び出すことがよくあります。その場合、ブラウザはクロスオリジンの問題を報告し、呼び出しを拒否します。 最も簡単な解決策は、ブラウザがセキュリティの問題を無視するように設定し、--disable-web-security を設定することです。ただし、この方法は PC ページの開発には適していますが、モバイル ページには適していません。 解決 リクエストを転送するには Nginx を使用します。ローカル ドメイン インターフェイスを呼び出すクロスドメイン インターフェイスを記述し、これらのインターフェイスを実際の要求アドレスに転送します。 例えば たとえば、Vue アプリケーションを開発しているとします。 オリジナル: デバッグページは次のとおりです: http://192.168.1.100:8080/ 要求されたインターフェースは次のとおりです: http://ni.hao.sao/api/get/info ステップ1: 要求されたインターフェースは次のとおりです: http://192.168.1.100:8080/api/get/info PS: これにより、クロスドメインの問題が解決されます。 ステップ2: Nginx をインストールした後、/usr/local/etc/nginx/ ディレクトリ (Mac の場合) に移動し、nginx.conf ファイルを変更します。 ステップ3: デフォルトのサーバー構成をコメントアウトします。 以下に追加: サーバ{ 聞く 8888; サーバー名 192.168.1.100; 位置 /{ プロキシパス http://192.168.1.100:8080; } 場所 /api{ proxy_pass http://ni.hao.sao/api; } } 保存したら、Nginx を起動します。 PS: Nginx の設定についてはあまり詳しく知る必要はありません。非常に簡単です。 ステップ4: アクセス: http://192.168.1.100:8888/ 終わり。 PS: アクセス ポートは「8888」であることに注意してください。他のドメインにアドレスがある場合は、場所の追加を続行してください。 エラーのデモンストレーション 最初はNginxの設定がよくわからなかったので、次のように設定できると思いました。 サーバ{ 8080を聴く; サーバー名 192.168.1.100; 場所 /api{ proxy_pass http://ni.hao.sao/api; } } これを書いた理由は、これにより Nginx が 8080 のリクエストをリッスンし、一致するリクエストのみを転送できるようになると考えたからです。私が気付いていなかったのは、Nginx をこのように記述した後、ポート 8080 を占有する必要があるということでした。 ポートを占有する必要があるため、同じプロトコルの他のプロセスによって占有することはできず、その結果、開発されたページをポート 8080 で有効にできなくなります。同僚に指摘されて初めてこのことを思い出し、考え方を変えて上記の方法を思いつきました。 要約する 実際、これは開発やデバッグ中だけでなく、実稼働環境でも実行できます。 Nginx を使用してリクエストを転送した後は、展開する静的ページをリクエスト インターフェイスと同じドメインに配置する必要はありません。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MYSQLは時間(年、月、日)フィールドを変更されていない時間、分、秒に置き換えます。分析例
>>: フロントエンドコンポーネント化の基礎知識を詳しく解説
MySQL インストーラーは、MySQL ソフトウェアのあらゆるニーズに対応する、使いやすいウィザー...
1. PVとIPの統計一日のPV(ページビュー)をカウントする cat access.log | ...
目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...
序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...
HTML デザインパターン学習ノート今週は主にHTMLデザインパターンを学びました。学習内容をまとめ...
目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...
序文プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラ...
テキストオーバーフローを表示するにはどうすればいいですか? どのようなニーズがありますか?単一行です...
実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...
実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...
序文WeChat アプレットを開発する際には、ユーザーの権限が必要なページを使用する必要があることが...
目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...
注意: 他のマシン (IP) は、承認なしではクライアント経由で MySQL データベースに接続でき...
序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...
オブジェクト上にマウスを移動したときにコンテンツ(タイトル属性の内容)を折り返す方法、HTML タイ...