在使用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中文網其他相關文章！
