vue怎么实现请求转发
Vue 中实现请求转发的方法
在 Vue 项目中，请求转发通常用于解决跨域问题或统一管理 API 请求。以下是几种常见的实现方式：
使用开发服务器代理
在 vue.config.js 中配置 devServer.proxy，适用于开发环境：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://target-server.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}使用 Nginx 反向代理
在生产环境中，可以通过 Nginx 配置实现请求转发：
location /api/ {
proxy_pass http://target-server.com/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}通过中间层服务转发
创建 Node.js 中间服务处理请求转发：
const express = require('express')
const axios = require('axios')
const app = express()
app.use('/api', async (req, res) => {
const response = await axios({
method: req.method,
url: `http://target-server.com${req.url}`,
data: req.body
})
res.json(response.data)
})
app.listen(3000)使用 Axios 拦截器
通过 Axios 拦截器统一处理请求路径：
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API
})
service.interceptors.request.use(config => {
if (config.url.startsWith('/api')) {
config.url = config.url.replace('/api', '')
config.baseURL = 'http://target-server.com'
}
return config
})环境变量配置
结合环境变量管理不同环境的请求地址：
# .env.development
VUE_APP_API_BASE=/api
# .env.production
VUE_APP_API_BASE=https://production-server.com/api根据实际项目需求选择合适的方法，开发环境推荐使用 devServer.proxy，生产环境建议使用 Nginx 反向代理。
