vue-cli构建脚手架并配置代理解决跨域问题
注:只针对开发环境
项目脚手架由vue-cli构建,
1、修改config/dev.env.js,添加:VUE_APP_BASE_API
module.exports = merge(prodEnv, { NODE_ENV: '"development"', VUE_APP_BASE_API : '"/api"' })
2、修改config/index.js,修改proxyTable属性
proxyTable: { '/api': { //类似nginx的location配置 target: 'http://127.0.0.1:8087', //需要代理到的api服务地址 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/' //默认在转发时会给api接口带上'/api',如果api服务器,没有'/api'前缀,设置为''或者'/';如果有前缀,则可以去掉 } } }
3、创建axios对象时的配置:
const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 // request timeout })