前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue-cli解决开发环境的跨域问题

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

作者头像
用户1272076
发布2019-03-26 15:56:53
6560
发布2019-03-26 15:56:53
举报
文章被收录于专栏:张培跃

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

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

代码语言:javascript
复制
//代理配置表,在这里可以配置特定的请求代理到对应的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域名所负责的模块不同来进行多项配置:

代码语言:javascript
复制
//代理配置表,在这里可以配置特定的请求代理到对应的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。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 张培跃 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 注意:
  • 补充:
相关产品与服务
消息队列 TDMQ
消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档