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

在程式碼中，我們使用Axios的get方法來進行請求，同時設定請求頭為contentType為application/json。這樣就可以直接向API伺服器發起請求，取得資料。

2.使用Webpack Plugin

我們也可以透過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')
})

這裡我們透過使用http-proxy-middleware來實現對API伺服器的轉發，同時設定target來指定目標伺服器。

然後，在package.json檔案中加入一個script指令，用於啟動本機伺服器：

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

最後，在Vue專案中的axios設定中將baseURL設定為http:// localhost: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進行開發時不使用代理轉送的方法。雖然使用代理轉送是解決CORS的有效方法，但在某些情況下，直接與API伺服器進行互動會更加方便。希望本篇文章對你有幫助。

以上是vue中不使用代理轉發的詳細內容。更多資訊請關注PHP中文網其他相關文章！