Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

序文

最近、純粋なフロントエンドの 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 を開き、 /getDataを要求すると json データが返されます。

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 のパブリック部分が続き、これをプロキシするために/apisが使用されます。最後に、いくつかのパスが書き換えられ、リクエスト時にプロキシ apis がプレフィックスとして使用されます。

このプレフィックスはカスタマイズ可能で、proxyTable はオブジェクトなので、複数のプロキシを設定できます。

クロスドメインソリューション

2. vue3.0の場合

vue-cli3 スキャフォールディングが構築された後、プロジェクトディレクトリに vue.config.js ファイルが存在しないため、手動で作成する必要があります。

新しい vue.config.js を作成し、次の情報を構成して問題を解決します。

モジュール.エクスポート = {   
    開発サーバー: {
        プロキシ: {
            '^/api': {
                target: 'http://localhost:8080/', //インターフェースプレフィックス ws:true, //プロキシwebsocked
                changeOrigin:true, //仮想サイトのオリジンを変更する必要があります
                パス書き換え:{
                    '^/api':''//パスを書き換えます}
            }
        }
    }
}

まとめ:

changeOrigin: true : プロキシをオンにします。ローカルに偽のサーバーが作成され、要求されたデータが同時に送受信されるため、サーバーとサーバーが相互に対話できるようになります。

apisは実際のインターフェースリクエストのプレフィックスであり、実際のインターフェースプレフィックスのパブリック部分、つまりプロトコル+ホスト名+ポート番号をプロキシします。

たとえば、リクエストインターフェースがlocalhost:8080/getData渡す必要があるのはgetDataだけです。
すると、パブリック ドメイン名はlocalhost:8080/となり、リクエスト インターフェイスのパブリック ドメイン名localhost:8080/api/に変更するだけです。

プロジェクトを実行すると、インターフェースリクエストのパスがlocalhost:8081/apis/getDataであることがわかります。

プロキシに入った後の実際のリクエストパスは次のようになります: localhost:8080/getData

最後に

学習中は、公式ドキュメントをもっと読む必要があります。クロスドメインやその他の設定の問題については、公式ドキュメントにも多くの設定情報が記載されています。vue cliの設定

最近の現象を要約すると、死ぬほど疲れ果てない限り、死ぬまで一生懸命働くだろう、ということです。さあ、みんな。

これで、Vue が axios リクエストのフロントエンド クロスドメイン問題を解決する方法についての記事は終わりです。Vue が axios リクエストのフロントエンド クロスドメイン問題を解決する方法についての関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3はaxiosのクロスドメイン実装プロセス分析を構成する
  • vue-cli 3.x は Axios (proxyTable) クロスドメイン プロキシ メソッドを設定します
  • vue cli3 で axios を使用する際のクロスドメイン問題を解決する
  • Vue3.0 axios クロスドメイン リクエスト プロキシ サーバーの設定方法

<<:  mysql 更新ケース更新フィールド値が固定されていない操作

>>:  Docker ポート マッピングと外部アクセス不可の問題

推薦する

Centos8 で yum を使用して rabbitmq をインストールするチュートリアル

/etc/yum.repos.d/フォルダに入るrabbitmq-erlang.repo ファイルを...

テーブルを動的に読み込み、削除する JavaScript

この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考まで...

Ubuntu 18.04にPython仮想環境をインストールする

Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...

Vueはカルーセルアニメーションを実装します

この記事では、カルーセルアニメーションを実現するためのVueの具体的なコードを例として紹介します。具...

Pythonの関数知識についての簡単な説明

目次関数パラメータの2つの主要なカテゴリ位置パラメータ可変長パラメータ名前空間要約する関数パラメータ...

Vueでスワイパープラグインを使用する際の問題を解決する

デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつ...

Docker コンテナ入門から夢中になるまで(推奨)

1. Docker とは何ですか?仮想マシンについては誰もが知っています。Windows に Li...

スクロールラグの問題を解決するためのオーバーフロースクロールの詳細な説明

序文div またはモジュールに overflow: scroll 属性を使用すると、iOS フォンで...

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...

デザイン理論:テキスト表現とユーザビリティ

<br />テキストデザインでは、通常、テキストのレイアウト、つまりテキストをより美しく...

Linuxがすべてのコマンドをサポートしていない問題の解決策

Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...

スクラッチ宝くじの例を実現する JavaScript キャンバス

この記事では、スクラッチ効果を実現するためのJavaScriptキャンバスの具体的なコードを参考まで...

Iframe の使用を減らすべきいくつかの理由の分析

次のグラフは、100 個の異なる要素で iframe を作成するのにどれくらいの時間がかかるかを示し...

Vueシングルページアプリケーションの事前レンダリング方法の例

目次序文vue-cli 2.0 バージョンvue-cli 3.0 バージョン要約する序文vue-cl...