只需要配置一个代理,可以像这样在 vue.config.js 文件中设置:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://example.com', // 将请求代理到的后端服务器地址
changeOrigin: true, // 启用跨域
pathRewrite: {
'^/api': '' // 重写请求路径,将 '/api' 删除
}
}
}
}
};
所有以 /api 开头的请求都将被代理到 http://example.com,并且路径中的 /api 部分将被删除
需要配置多个代理,可以像这样在 vue.config.js 文件中设置:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/another-api': {
target: 'http://another-example.com',
changeOrigin: true,
pathRewrite: {
'^/another-api': ''
}
}
}
}
};
在配置代理后,可以在前端代码中发起请求:
axios.get('/api/some-endpoint')
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
ヾ( ̄▽ ̄)Bye~Bye~