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サーバー上。

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

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); });

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

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