1、手动在项目根目录创建vue.config.js
# vue.config.js
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: {
'/api': { //代理标识
target: process.env.VIAE_WEB,// 要跨域的域名，指向的实际地址,可根据环境配置
changeOrigin: true, // 是否开启跨域
pathRewrite: { // 标识替换，若接口带api可不配置该项
// 原请求地址为 /api/getData 将'/api'替换''时
// 代理后的请求地址为： http://xxx.xxx.xxx/getData
// 若替换 为'/other',则代理后的请求地址为 http://xxx.xxx.xxx/other/getData
'^/api': ' '
}
},
'/get': {
target: 'http://localhost:3000',// 要跨域的域名
changeOrigin: true, // 是否开启跨域
}
}
}
}
2、在请求跨域接口的时候就可以利用本地服务加上要跨域的接口地址即可
// 请确认原请求中是否包含代理标识符
// 请确认接口 http://xxx.xxx.xxx/getData直接访问是否正常
this.$axios.get('/api/getData').then((r)=>{
console.log(r)
})
3、配置完代理后请一定重新执行
npm run dev
4、vue proxy 代理https
proxyTable: {
// 代理所有的以 /api 开头的请求到 https://xxxx.com '/api': {
target: 'https://xxxx.com',
changeOrigin: true,
secure: false,
headers: {
Referer: 'https://xxxx.com' }
}
}
