vue20 クロスドメインプロキシを解決する方法-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-25 11:10:07

オリジナル

489 人が閲覧しました

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 サイトの他の関連記事を参照してください。