VUE:跨域设置

相信很多小伙伴在开发过程中遇到比较头疼的事情之一,就是在本地与非本地环境中的接口进行联调(至少我一厢情愿的这么认为OTZ)。在最近的开发过程中,不可避免的,我也遇到了这个问题,毕竟在本地YY写完代码,再上传测试实在是太。。。蛋疼。接下来,我将就我遇到的问题以及解决方式与众位小伙伴分享~(掌声~)

在此项目中,我使用了vue的脚手架,vue-cli,跨域的设置在config文件夹下的index.js中。通过在该JS文件中的dev对象里配置proxyTable来实现跨域设置。举个栗子:

proxyTable: {
 '/api': {
   target: 'https://xxxxx/api',
   changeOrigin: true,
   pathRewrite: {
     '^/api': ''
   }
 }
},

在该项配置中,target设置的是需要访问的API的域名,配置结束后,如果需要访问https://xxxxx/api/xxxx/xxx,只需要将访问的链接地址设置为/api/xxxx/xxx即可,webpack会进行转发。

PS:如果在项目路径中没有找到config文件夹的童鞋,你可能需要更新下vue-cli了,老版本的vue-cli没有config以及build文件夹。(一开始我设置失败了就是这个原因,感觉装了个假的脚手架→_→。。)

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值