Vue和Express都是非常常用的Web開發(fā)框架，而在一些情況下，我們可能需要使用Vue來調(diào)用Express中的API。這時(shí)候就需要進(jìn)行轉(zhuǎn)發(fā)，下面我們將介紹如何實(shí)現(xiàn)Vue和Express的轉(zhuǎn)發(fā)。

首先，在Vue項(xiàng)目的vue.config.js中配置proxy，例如我們要訪問后端API的地址為http://localhost:3000/api，則需要這樣配置：

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
}
}

其中target指向的是后端API服務(wù)器的地址，pathRewrite指向的是要重寫的路徑。然后我們在Vue項(xiàng)目的代碼中就可以直接使用/api來調(diào)用后端的API了：

fetch('/api/users')
.then(response =>response.json())
.then(users =>console.log(users))

接下來，在Express服務(wù)器中需要使用cors中間件來允許跨域請求，并且需要設(shè)置跨域請求的地址。例如，我們要允許來自http://localhost:8080的跨域請求，則需要這樣設(shè)置：

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors({
origin: 'http://localhost:8080'
}))
app.get('/api/users', function (req, res) {
// handle API request here
})
app.listen(3000)

現(xiàn)在我們就成功地實(shí)現(xiàn)了Vue和Express之間的轉(zhuǎn)發(fā)，可以在Vue中愉快地使用Express提供的API了。