プロキシ転送は vue では使用されません

Vue を使用して開発する場合、多くの場合、バックエンド API サーバーと対話する必要があります。 CORS (Cross-Origin Resource Sharing) 問題を回避するために、通常、Vue 設定ではプロキシ転送を使用してリクエストを転送します。ただし、プロキシを使用せずに API サーバーと直接対話する必要がある場合があります。この場合はどうすればよいでしょうか?

1. サードパーティのライブラリを使用する

VueCLI のデフォルトのプロキシ構成を使用したくない場合は、リクエストの作成にサードパーティのライブラリを使用することを選択できます。たとえば、Axios を使用して、リクエストを行うときにリクエスト ヘッダーと関連パラメータを設定することで、API サーバーと直接対話できます。

まず、Vue プロジェクトに Axios をインストールする必要があります:

npm install axios --save

リクエストを行う必要があるコンポーネントでは、次のように Axios を使用できます:

import axios from 'axios'

axios.get('/api/getUserInfo', {
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => {
  console.log(res)
})

Inコードでは、Axios の get メソッドを使用してリクエストを作成し、リクエスト ヘッダーを contentType に application/json に設定します。このようにして、API サーバーへのリクエストを直接開始してデータを取得できます。

2. Webpack プラグインの使用

Webpack プラグインを使用して、プロキシを使用せずに転送されるリクエストを実装することもできます。具体的な実装は、Express および http-proxy-middleware プラグインと連携して API サーバーへのアクセスを実現することにより、プロキシ サーバーを置き換えるローカル サーバーをセットアップすることです。

まず、関連するプラグインをインストールする必要があります:

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

プロジェクトのルート ディレクトリに新しい server.js ファイルを作成して、ローカル サーバーを起動します:

const express = require('express')
const proxy = require('http-proxy-middleware')

const app = express()

app.use('/api', proxy({
  target: 'http://api.server.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}))

app.listen(3000, () => {
  console.log('Server is running at localhost:3000')
})

ここでは、API サーバーを転送するために Use http-proxy-middleware を渡し、ターゲット サーバーを指定するために set target を渡します。

次に、ローカル サーバーを起動するスクリプト コマンドを package.json ファイルに追加します。

"scripts": {
  "dev-server": "node server.js"
}

最後に、Vue プロジェクト localhost の axios 設定で、baseURL を http:// に設定します。 :3000/api、API サーバーへのリクエストを直接開始できます:

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api'

axios.get('/getUserInfo').then(res => {
  console.log(res)
})

このようにして、http://localhost:3000/api/getUserInfo を通じて API サーバーへのリクエストを直接開始できます。住所。

概要

上記は、プロキシ転送を使用せずに開発に Vue を使用する 2 つの方法です。プロキシ転送の使用は CORS を解決する効果的な方法ですが、場合によっては API サーバーと直接対話する方が便利な場合があります。この記事がお役に立てば幸いです。

以上がプロキシ転送は vue では使用されませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。