序文 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は時間(年、月、日)フィールドを変更されていない時間、分、秒に置き換えます。分析例
>>: フロントエンドコンポーネント化の基礎知識を詳しく解説
前面に書かれた今日のインターネット分野では、Nginx は最も広く使用されているプロキシ サーバーの...
Hyper-V を展開するためのハードウェア要件は次のとおりです。 64 ビット プロセッサ、具体...
使用 <div id="アプリ"> <router-link ...
退屈だったので、ループに関する簡単な演習をいくつかまとめてみました。JS を学び始めたばかりの方に役...
目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...
朝早くに電話で起こされました。あるプロジェクトのデータベースがダウンしていて起動できないとのことでし...
CSS の font-family プロパティを使用して中国語フォントを参照する場合、フォントを定義...
Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...
この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は...
目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...
最近はMySQLのメモをたくさん取っていますが、それは主に会社のOracleが比較的安定していてメン...
背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...
要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下...
jsonデータはhtml形式で返される必要がありますつまり、 response.setContent...
目次Dockerコンテナのソースコードを使用してhttpdをデプロイし、ストレージボリュームを使用し...