Vue-cli解决开发环境的跨域问题

对于前端开发人员来讲,当你在开发环境中与后台开发人员进行数据联调时,总会遇到烦人的跨域问题!

解决跨域的方法有很多种,比如你和后台人员经过友好协商后,你可以通过JSONP的方式或者让后台人员将代码设置为允许你进行跨域!但是往往前后台开发人员的配合默契度是不太高的。如果后台只给你接口,并明确告诉你不允许修改接口,怎么办?怎么办才能实现跨域?此时你就可以通过proxyTable来解决跨域问题!
通过proxyTable解决跨域在Vue-cli当中是很简单的。只需修改config文件夹下的index.js中的proxyTable就能实现:

//代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
   "/api":{
       target:"http://www.zhangpeiyue.com",//访问的服务器地址
       changeOrigin:true,//true为开启代理
       //secure: true, // 如果是https接口,需要配置这个参数
       pathRewrite:{
           '^/api': '/'//路径的替换规则
          /*
           *这里的配置是正则表达式,以/api开头的路径将会被‘/'替换掉
           *假如后台文档的接口是 "http://www.zhangpeiyue.com/user/add"
           *前端调取API接口应写:axios.get('/api/user/add')
           */

       }
   }
}

以上代码的“/api”你可以认为用于代替target里面的地址,调取接口的地址直接用api来替换。
比如后台接口地址为:”http://www.zhangpeiyue.com/user/login”。
你可以直接写为:”/api/user/login”即可。
当然,你也可以根据不同的API域名所负责的模块不同来进行多项配置:

//代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
   "/adv":{
       target:"http://adv.zhangpeiyue.com",//访问的服务器地址
       changeOrigin:true,//true为开启代理
       pathRewrite:{
           '^/adv': '/'//路径的替换规则
       }
   },
   "/user":{
       target:"http://user.zhangpeiyue.com",//访问的服务器地址
       changeOrigin:true,//true为开启代理
       pathRewrite:{
           '^/user': '/'//路径的替换规则
       }
   }
}

以上代码”/adv”与”/user”分别负责项目中的广告模块与用户模块。
例如:
接口地址:“http://adv.zhangpeiyue.com/add”,
前端调取API接口应写:axios.get(‘/adv/add’)

注意:

配置修改完以后一定要重新npm run dev 一次

补充:

changeOrigin的属性值为一个布尔值,如果设置为true,那么本地会虚拟一个NODE服务端接收你的请求并代你发送该请求(中间件)。因为服务端语言是没有跨域问题的,所以这样最终就解决了跨域问题了。不过这只适用于开发环境,上线后可以使用反向代理nginx。

发表评论

登录后才能评论
联系客服
联系客服
分享本页
返回顶部