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 を応援していただければ幸いです。

以下もご興味があるかもしれません: