Vue-CLI项目中开发与生产环境的代理配置详解及跨域解决方案
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文详细介绍了在使用Vue-CLI进行前端开发时，如何设置开发和生产环境下的代理配置以解决跨域问题，并提供相应的跨域解决方案。
使用vue-cli创建的项目，默认开发地址是localhost:8080。如果需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial，由于不同域名之间的限制，必须进行跨域设置才能正常请求数据。
解决跨域的方法有很多，通常情况下都需要后台配置支持。但对于vue-cli创建的项目来说，则可以直接利用node.js代理服务器来实现这一功能。具体操作是在项目的config文件夹下的index.js中修改dev部分：
```javascript
dev: {
assetsSubDirectory: static,
}
```
在上述代码基础上添加或调整proxyTable属性，以配置跨域请求的代理规则。
例如可以这样增加一个代理规则：
```javascript
dev: {
proxyTable: {
/api: {
target: http://192.168.0.112:8080,
changeOrigin: true,
pathRewrite: { ^/api: }
},
},
}
```
这样配置后，当vue项目中使用axios或fetch等工具请求以/api开头的URL时，实际会将请求转发到http://192.168.0.112:8080指定的目标地址。
全部评论 (0)
还没有任何评论哟~
