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 ポート マッピングと外部アクセス不可の問題

推薦する

MySQLのlike演算子の詳細

1. はじめに不明な値または部分的に既知の値をフィルタリングする場合は、like 演算子を使用でき...

Linux ファイルを分割するための split コマンドの詳細な説明

いくつかの簡単な Linux コマンドを使用すると、ストレージまたは電子メールの添付ファイルのサイズ...

CSSレイアウトにおけるフロート属性と位置属性の違い

CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...

docker compose を使ってワンクリックで分散構成センター Apollo を展開するプロセスの詳細な説明

導入分散について話すときは、分散構成センター、分散ログ、分散リンク トラッキングなどについて考える必...

Linux カーネルの copy_{to, from}_user() に関する考察

目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...

vue.js ベースの QQ チャット ルーム

目次導入効果のデモンストレーションは次のとおりです。 MChat コンポーネントのレンダリング: I...

Docker Consul の概要とクラスター環境構築手順(グラフィカルな説明)

目次1. Dockerコンサルの概要2. nginxとconsulをベースにした自動検出と高可用性の...

Docker が elasticsearch を起動するときのメモリ不足の問題と解決策

質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...

docker を使用して influxdb と mongo をデプロイするための一般的なコマンド

Docker ベースのデータベースをデプロイするsudo docker pull influxdb ...

SSHパスワードフリーログイン設定方法の詳しい説明(画像とコマンド)

まず、私たちがやりたいことは、serverA の usera を使用して、パスワードなしで serv...

CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル

目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...

JS での new の手書き実装

目次1 新しいオペレータの紹介2 新しいものは何をしましたか? 3 新しい演算子の実装をシミュレート...

HTML構造化実装方法

DIV+css構造 CSSレイアウトを学んでいますか?まだ純粋な CSS レイアウトを完全に習得でき...

MySQL データベースのアップグレードにおけるいくつかの「落とし穴」

商用データベースの場合、データベースのアップグレードは優先度が高く、バージョンアップのロードマップ、...

MySQLのテーブル構造を変更する際に知っておきたいメタデータロックの詳しい解説

序文MySQL を扱ったことがある人なら、テーブル メタデータ ロックの待機についてよく知っているは...