序文最近、純粋なフロントエンドの 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 ポート マッピングと外部アクセス不可の問題
1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...
いくつかの簡単な Linux コマンドを使用すると、ストレージまたは電子メールの添付ファイルのサイズ...
CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...
導入分散について話すときは、分散構成センター、分散ログ、分散リンク トラッキングなどについて考える必...
目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...
目次導入効果のデモンストレーションは次のとおりです。 MChat コンポーネントのレンダリング: I...
目次1. Dockerコンサルの概要2. nginxとconsulをベースにした自動検出と高可用性の...
質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...
Docker ベースのデータベースをデプロイするsudo docker pull influxdb ...
まず、私たちがやりたいことは、serverA の usera を使用して、パスワードなしで serv...
目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...
目次1 新しいオペレータの紹介2 新しいものは何をしましたか? 3 新しい演算子の実装をシミュレート...
DIV+css構造 CSSレイアウトを学んでいますか?まだ純粋な CSS レイアウトを完全に習得でき...
商用データベースの場合、データベースのアップグレードは優先度が高く、バージョンアップのロードマップ、...
序文MySQL を扱ったことがある人なら、テーブル メタデータ ロックの待機についてよく知っているは...