vue设置反代
生产环境下
我自己在做一个后台项目时遇到跨域的问题,前端项目运行端口为localhost:8080,后端项目运行端口为localhost:3000,前端向后台发起数据请求时报错,解决方法就是配置vue的反向代理
- 在项目目录中有一个config目录,打开里面的index.js文件
- 添加代码
proxyTable: {
'/api/**': {
target: 'http://www.xxxx.com:3000',
changeOrigin: true,
emulateJSON: true,
pathRewrite: {
'^/api': ' '
}
}
}
- 这里的host因为我是测试环境,所以把host的值改成了项目的域名,
- api代替了其中的后台项目地址
- 里面的target值为后台项目的地址
测试环境
修改系统hosts文件,把127.0.0.1指向到你项目的域名
编辑nginx.conf,修改localhost以及端口参数,指向后台项目地址
把localhost改为域名即可,
大致可参照生产环境进行配置