- 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
例如请求的`url:“http://aa.com/demo.json“
1.1、打开config/index.js,在proxyTable中添写如下代码:
proxyTable: {
'/api': { //使用"/api"来代替"http://aa.com"
target: 'http://aa.com', //源地址
changeOrigin: true, //改变源
secure:false // 是否使用https
pathRewrite: {
'^/api': '/api' //路径重写
}
}
}
1.2 、使用axios请求数据时直接使用“/api”
getData () {
axios.get('/api/demo.json', function (res) {
console.log(res)
})
以上配置只是在开发环境(dev)中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.js
和config/prod.env.js
里也就是开发/生产环境下分别配置一下请求的地址API_HOST
,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:"/api/"
})
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_HOST:"http://aa.com"
}
网友评论