vue20 クロスドメイン プロキシを解決する方法

Web 開発の継続的な開発と進歩により、ますます多くのフロントエンド テクノロジとフレームワークが広く使用されています。最新の JavaScript フレームワークとして、Vue.js はフロントエンド開発でよく選ばれるようになりました。 Vue.js アプリケーションの開発プロセスでは、クロスドメインがよく発生する問題です。この記事では、Vue.js 2.0 のクロスドメインの問題とその解決策を紹介します。

1. クロスドメインとは

Web アプリケーション開発において、ブラウザーの同一オリジンにより、あるページが 1 つのドメイン名の Web サイトから別のドメイン名のリソースへのアクセスを要求する場合ポリシーの制限により、リソースを正しく取得できません。これをクロスドメインと呼びます。

具体的には、同一生成元ポリシーはブラウザの中核であり、最も基本的なセキュリティ機能です。同一オリジン ポリシーでは、2 つの URL が同じプロトコル、ドメイン名、ポートを持つ場合にのみ相互アクセスを許可する必要があります。そうでない場合は、クロスドメインの問題が発生します。

わかりやすく言うと、1 つの Web サイトを Web サイト A と呼び、もう 1 つの Web サイトを Web サイト B と呼ぶとします。Web サイト A がブラウザを通じて Web サイト B にデータを要求すると、Web サイト B は Web サイト A が存在するドメインにないため、 、デフォルト この場合、ブラウザはこのアクセス要求を拒否します。

2. Vue.js 2.0 のクロスドメインの問題

Vue.js 2.0 はシングルページ アプリケーションであるため、デフォルトの開発環境および運用環境では、開発と運用にローカルの Node.js サーバーが使用されます。テスト中。この場合、クロスドメインの問題が頻繁に発生します。

たとえば、axios を使用して Ajax リクエストを送信し、バックエンド サーバーから JSON データをリクエストします。コードは次のとおりです:

import axios from 'axios'

axios.get('http://localhost:8080/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

上記のコードでは、Ajax リクエストを送信しようとしています。アドレス http: //localhost:8080/api/data のサーバーは GET リクエストを送信しますが、ブラウザーはデフォルトでそのようなクロスドメイン アクセスを許可していないため、操作中にエラーが発生します。 。

3. クロスドメインの問題を解決する方法

クロスドメインの問題を解決するには、プロキシ サーバーを指定し、サーバーをローカルで起動して、すべてのクロスドメインを転送する必要があります。サーバー上位にリクエストします。プロキシ サーバーとバックエンド サーバーは両方とも同じドメイン内にあるため、クロスドメインの問題は発生しません。

Vue.js 2.0 では、webpack-dev-server の proxyTable 構成アイテムを使用してプロキシ サーバーを指定できます。 proxyTable はオブジェクトであり、その中の各属性は次の形式のプロキシ ルールです。

proxyTable: {
  '/api': 'http://localhost:9000'
}

上記のコードでは、/api で始まるすべてのリクエストを次のアドレスに転送します。 ##http://localhost:9000 サーバー上。

4. サンプル コード

次は、proxyTable を使用してプロキシ サーバーを構成する方法のサンプル コードです:

// 代码文件：vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000', // 代理目标地址
        pathRewrite: { '/api': '' }, // 请求路径重写
        changeOrigin: true, // 允许跨域
      },
    },
  },
}

上記のコードでは、最初に構成する必要があります。 Vue.js 2.0

vue.config.js ファイルをプロジェクトのルート ディレクトリに追加します。これは、開発環境でサーバーを構成するために使用されます。 devServer では、プロキシ ルールを含むオブジェクトである proxy 属性を追加しました。バックエンド API の実際の状況に応じてプロキシ ターゲット アドレスを設定できます (http://localhost:9000 など)。

pathRewrite 属性を設定して、リクエスト パスの書き換えルールを指定することもできます。たとえば、リクエスト パスが /api/data の場合、{ '/api': '' } を使用して /api プレフィックスを削除できます。リクエストのパスは /data になります。

最後に、クロスドメイン アクセスを許可するために、

changeOrigin 属性を true に設定する必要もあります。その後、axios を使用してクロスドメイン リクエストを送信できるようになります:

import axios from 'axios'

axios.get('/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

5. 概要

この記事では、Vue.js 2.0 のクロスドメインの問題とその解決策を紹介します。同一生成元ポリシーの制限により、フロントエンド アプリケーションから他のドメイン名のリソースに直接アクセスすることはできませんが、プロキシ サーバーを使用してこの問題を回避できます。 Vue.js 2.0 では、webpack-dev-server の

proxyTable 構成項目を使用して、クロスドメインの問題を解決するプロキシ サーバーを指定できます。

以上がvue20 クロスドメイン プロキシを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。