Vue CLI生产打包部署时如何解决跨域请求失败问题？

本文共计1421个文字，预计阅读时间需要6分钟。

常见的跨域配置(/config/index.js): proxyTable: { '/api': { target: 'http://192.168.2.139:8080/Mobile/Max', // 目标接口域名 port: 8080, // 目标端口 pathRewrite: {'^/api' : ''}, // 重写路径，去掉/api prefix secure: false, // 是否https changeOrigin: true, // 是否跨域 } }

常见的跨域配置(/config/index.js):

proxyTable: { '/api': { target: '192.168.2.139:8080/Mobile/Max', // 接口的域名 // secure: false, // 如果是192.168.xx:xxx"' //项目api地址 }

注意属性值里面要双引号，否则会报错（Unterminated string constant）。

配置好之后，程序会自动判断当前是开发还是生产环境，然后匹配VUE_APP_BASE_API。

VUE_APP_BASE_API可以通过process.env.VUE_APP_BASE_API来访问。

每次使用：process.env.VUE_APP_BASE_API+api地址 会很麻烦，这时我们可以设置axios的baseuURL。

一般我们会自己写个axios拦截器,生成一个axios对象，进行token等安全验证。再把这个对象引用到main,js，挂载在vue实例上。这里不做相关赘述，网上有很多。