Vuecli上配置跨域代理

  • 前几天某然间看一个直播课,直播的老师讲了一些关于跨域的问题,以及如何处理,自己才恍然大悟,自己在这方面是个菜鸡,所以就花了点时间补习了一下,总结一下一些知识点
  • 一个网址是由协议+域名+端口组成的,两个地址之间如果传输信息时,三者只要有一个不同,就是跨域,当然跨域会导致数据不能正常的获取与传输。
  • 例如:http://www.127.0.0.1:8080这个url里面 http是协议 127.0.0.1是域名 :8080是端口号
  • 一个需要注意的知识点是 http协议和https协议是不同协议 二者的默认端口号是不同的,http默认的端口号是8080 https默认端口号是443,并且默认的端口号是可以不写的
  • 例如:http://www.baidu.com 省略了域名 完整的写法是http://www.baidu.com:8080
  • 那么,如何处理跨域问题呢?? ---- 同源处理
  • 可以前端处理跨域问题,也可以后端处理跨域,因为我主要学习Vue,所以我只要是了解了如何前端处理跨域问题
  • 在Vuecli脚手架中我们可以在vue.config.js中配置proxy来处理跨域
  • 上代码!
  • 在这里插入图片描述
  • 一些配置在Vuecli的官网上有教程 我主要留意一些注意点
  • proxy的 '/api’是代理的名字,可以自己随意取,但是也不要太随意
  • 其中proxy的pathRewrite中用正则强制了让代理必须是以/api开头的vue才会处理跨域,这样做的处理主要是为了避免一些静态资源,比如css也含有api这个名字,导致他们也去触发代理
  • target就是代理索要转到的url地址,一定要写上http://
  • 在配置了代理以后我们要访问跨域的地址就直接以代理名开头访问即可
  • 例如: 在这里插入图片描述
  • axios返回的是一个promise对象,数据都在data属性里面,我们可以使用ES6提供的结构赋值的方法快速获取data中的值 ,可以省掉一部分代码
  • 我决定现在要花时间好好的再研究一下Node.js的内容,因为作为一个前端程序员,至少得掌握一门后端的代码~ 因为学node.js的同时还能够查漏补缺自己的原生JS的一些没有账务好的基础~~ 哈哈。

  • 加油!!!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值