vue2.0のクロスドメインプロキシを解決する方法

フロントエンドとバックエンドが分離された開発モデルでは、通常、フロントエンドはAjaxを介してバックグラウンドインターフェースにリクエストを行うことでデータを取得します。ただし、同一生成元ポリシーの制限により、フロントエンドは同じドメイン名の下にあるインターフェイスのみを要求でき、他のドメイン名の下にあるインターフェイスを直接要求することはできません。これはいわゆるクロスドメイン問題です。

クロスドメインの問題を解決するには、クロスドメイン プロキシ テクノロジを使用できます。 Vue2.0では、webpackのproxyTableを設定することでクロスドメインプロキシを実装できます。ここでは、Vue2.0でクロスドメインプロキシを設定する方法を詳しく紹介します。

1. http-proxy-middleware をインストールします

http-proxy-middleware は、リクエスト プロキシをターゲット サーバーに転送してクロス サーバーを実現できる Node.js プロキシ ミドルウェアです。オリジンリクエスト。まず http-proxy-middleware をインストールする必要があります。

npm install http-proxy-middleware --save-dev

2. Configure proxyTable

Vue2.0 プロジェクトでは、通常、webpack 設定ファイルはプロジェクトのルート ディレクトリにあります。 config/index.js ファイル。このファイルで proxyTable を構成する必要があります:

dev: {
  // ...
  proxyTable: {
    '/api': {
      target: 'http://127.0.0.1:3000', // 目标服务器地址
      changeOrigin: true,  // 是否改变请求源
      pathRewrite: {
        '^/api': ''  // 路径重写
      }
    }
  }
},

上記のコードでは、/api で始まる要求を指定されたターゲット サーバーにプロキシするプロキシ ルールを構成します。要求された URL が /api/user の場合、インターフェイス http://127.0.0.1:3000/user にプロキシされます。 changeOrigin はリクエスト ヘッダーのホスト フィールドを設定するために使用され、pathRewrite はパスを書き換えて /api プレフィックスを削除するために使用されます。

3. package.json を構成する

package.json ファイルに次のコードを追加する必要があります:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev"
},

これにより、次のコードを使用できるようになります。 npm run dev コマンドは開発サーバーを起動し、プロキシ ルールが自動的にロードされて使用されます。

4. Vue ファイルでのプロキシの使用

クロスドメイン リクエストを使用する必要がある Vue 単一ファイル コンポーネントでは、プロキシで定義された /api プレフィックスを直接使用できます。ルール データをリクエストするには、次のようにします。

// 请求当前登录用户信息
axios.get('/api/user').then(response => {
  this.user = response.data
}).catch(error => {
  console.log(error)
})

上記は、Vue2.0 でクロスドメイン プロキシを構成するための詳細な手順です。プロキシ ルールを使用すると、開発環境で他のドメイン名でインターフェイスを正常にリクエストできるため、フロント エンドとバック エンドの共同開発が容易になります。

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