vue-cli proxyTable跨域请求
在项目开发的时候,接口联调的时候一般都是同域名下,但是当我们现在使用vue-cli进行项目打包的时候,会启动我们本地的服务器,比如域名是http://localhost:9527 ,这种情况下我们再访问其他的接口地址,就会存在跨域的问题,请求接口就会出现错误,因此我们需要在打包的时候配置一下。
1. 开发环境
在vue-cli项目中的config
文件夹下的index.js
配置文件中,dev
长这样子
1 dev: { 2 // 静态资源文件夹 3 assetsSubDirectory: 'static', 4 // 发布路径 5 assetsPublicPath: '/', 6 // 代理配置表 7 proxyTable: { }, 8 // 本地访问 9 host: 'localhost', 10 }
我们修改一下:
// 只能在开发环境中进行跨域,上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可 '/api': { target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news.baidu.com', secure: true, // 如果是https接口,需要配置这个参数 changeOrigin: true,//这个参数是用来回避跨站问题的,配置完之后发请求时会自动修改http header里面的host,但是不会修改别的 pathRewrite: { '^/api': '/api'//路径的替换规则 //这里的配置是正则表达式,以/api开头的将会被用用‘/api’替换掉,假如后台文档的接口是 /api/list/xxx //前端api接口写:axios.get('/api/list/xxx') , 被处理之后实际访问的是:http://news.baidu.com/api/list/xxx } } },
打印出数据没有报错就说明已经跨域成功了
1.1 修改本地hosts
文件
可以修改的本地的hosts,一劳永逸,也能解决本地测试后台无法向我们本地环境设置cookie
的问题
vi /etc/hosts 打开hosts文件,
127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 localhost
localhost www.exaple.com
2. 发布上线
上线要进行nginx反向代理设置,同时应区分环境变量,判断是不是 development环境,是的话就是空的,否则就是配置文件里设置的根作用域。