序文最近、純粋なフロントエンドの vue プロジェクトを書いていたときに、axios がローカル リソースを要求したときに access が 404 を報告するという問題が発生しました。これは私にとって非常に不快なことです。情報を確認したところ、クロスドメインの問題であることが判明しました。 通常の開発におけるクロスドメインの問題には多くの解決策があります。最も一般的なのは、バックエンドが応答ヘッダーを変更することです。しかし、フロントエンドはリバースプロキシを通じて解決することもできます。次回このようなミスが起きないように、記録してまとめておきましょう。 それでは、復習して解決してみましょう。 1. クロスドメインの問題はなぜ発生するのでしょうか?クロスドメイン: ブラウザが、あるドメイン名の Web ページのリソースを別のドメイン名から要求する場合、ドメイン名、ポート、またはプロトコルが異なると、クロスドメインになります。 フロントエンドとバックエンドの分離モードでは、フロントエンドとバックエンドのドメイン名が一致せず、クロスドメインアクセスの問題が発生してしまいます。クロスドメイン問題は、JavaScript の同一生成元ポリシーに起因します。つまり、プロトコル + ホスト名 + ポート番号 (存在する場合) が同じ場合にのみ相互アクセスが許可されます。つまり、JavaScript は自身のドメインの下にあるリソースにのみアクセスして操作することができ、他のドメインの下にあるリソースにアクセスして操作することはできません。クロスドメインの問題は、JS と ajax に発生します。 Axios は Promise を介して Ajax テクノロジーをカプセル化したものなので、クロスドメインの問題もあります。 2. 解決策ここでは、このマシンを使用して、テスト用に 2 つの異なるポートを開きます。 未処理のクロスドメイン エラー クロスドメイン処理要求はありません。 axios.get('http://localhost:8080/getData') .then(res => { コンソール.log(res) }) .catch(エラー => { コンソールエラー(err); }) クロスオリジンリソース共有 (CORS)フロントエンドは、クロスドメインの問題を解決するためにリバースプロキシを実行します。概略図は以下のとおりです。 1. vueプロジェクトのポートは8081です 2. コンピューターのポート 8080 を開き、 3. プロキシを設定する 1. vue2.0の場合 config フォルダー内の index.js ファイルを変更し、proxyTable に次のコードを追加します。 プロキシテーブル: { '/apis': { target: 'http://localhost:8080/', // クロスドメインを解決するドメイン名 interfacesecure:false, // https インターフェースの場合は、このパラメータを設定する必要がありますchangeOrigin: true, // インターフェースがクロスドメインの場合は、このパラメータを設定する必要がありますpathRewrite: { '^/apis': '' // パスの書き換え} }, }, 次に、axiosリクエストにこれを記述します axios.get('apis/getData') .then(res => { コンソール.log(res) }) .catch(エラー => { コンソールエラー(err); }) 分析: ターゲットの後に、リクエストする必要のある URL のパブリック部分が続き、これをプロキシするために このプレフィックスはカスタマイズ可能で、proxyTable はオブジェクトなので、複数のプロキシを設定できます。 クロスドメインソリューション 2. vue3.0の場合 vue-cli3 スキャフォールディングが構築された後、プロジェクトディレクトリに vue.config.js ファイルが存在しないため、手動で作成する必要があります。 新しい vue.config.js を作成し、次の情報を構成して問題を解決します。 モジュール.エクスポート = { 開発サーバー: { プロキシ: { '^/api': { target: 'http://localhost:8080/', //インターフェースプレフィックス ws:true, //プロキシwebsocked changeOrigin:true, //仮想サイトのオリジンを変更する必要があります パス書き換え:{ '^/api':''//パスを書き換えます} } } } } まとめ: たとえば、リクエストインターフェースが プロジェクトを実行すると、インターフェースリクエストのパスが プロキシに入った後の実際のリクエストパスは次のようになります: 最後に学習中は、公式ドキュメントをもっと読む必要があります。クロスドメインやその他の設定の問題については、公式ドキュメントにも多くの設定情報が記載されています。vue cliの設定 最近の現象を要約すると、死ぬほど疲れ果てない限り、死ぬまで一生懸命働くだろう、ということです。さあ、みんな。 これで、Vue が axios リクエストのフロントエンド クロスドメイン問題を解決する方法についての記事は終わりです。Vue が axios リクエストのフロントエンド クロスドメイン問題を解決する方法についての関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql 更新ケース更新フィールド値が固定されていない操作
>>: Docker ポート マッピングと外部アクセス不可の問題
/etc/yum.repos.d/フォルダに入るrabbitmq-erlang.repo ファイルを...
この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考まで...
Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...
この記事では、カルーセルアニメーションを実現するためのVueの具体的なコードを例として紹介します。具...
目次関数パラメータの2つの主要なカテゴリ位置パラメータ可変長パラメータ名前空間要約する関数パラメータ...
デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつ...
1. Docker とは何ですか?仮想マシンについては誰もが知っています。Windows に Li...
序文div またはモジュールに overflow: scroll 属性を使用すると、iOS フォンで...
目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...
MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...
<br />テキストデザインでは、通常、テキストのレイアウト、つまりテキストをより美しく...
Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...
この記事では、スクラッチ効果を実現するためのJavaScriptキャンバスの具体的なコードを参考まで...
次のグラフは、100 個の異なる要素で iframe を作成するのにどれくらいの時間がかかるかを示し...
目次序文vue-cli 2.0 バージョンvue-cli 3.0 バージョン要約する序文vue-cl...