Vue 前端跨域的解决方案(心得记录)

学习记录 同时被 2 个专栏收录
53 篇文章 1 订阅
9 篇文章 0 订阅

背景:

今天面试一面和二面都还ok,三面是两个小姐姐(工作性质应该是外包驻场,所以有甲方来面),简历上巴拉巴拉的简单聊了一下,到了关键了,小姐姐说问一下基础的东西(这也是最怕的,毕竟Vue我之前用的挺浅,局限在项目所用),小姐姐问,怎么解决Vue项目中的跨域问题。
我当时虎躯一震,用服务器代理解决,我们之前的项目都是这么干的,简单省事,当时还想说jsonp的,但是怕错了,没敢说,结果可想而知,表现一般,小姐姐就问俩问题,都答的不好,所以结束之后,我赶快补习了一下。

(一)
首先需要知道一点,跨域的问题的出现肯定是因为请求数据时产生的,产生的原因是因为一下三点:
1.域名不同
2.协议不同
3.端口不同
具体为什么会有跨域,当然是为了安全,为了防止在用户不知情的情况下浏览器悄悄的做一些恶意操作(例如,恶意加载,钓鱼网站),嗯,再多的话,由于项目经历有限,大家可以自行度娘。
(二)
现在可以谈谈跨域解决方案了,跨域解决方案总的来说无非两种方式,网上的很多很多个解决跨域方案,也跳不出这两类:
  1. 通过后端解决
    这个主要解决端口和协议跨域的问题。
  2. 在前端解决

然后是详细的方法了,后端方法有(应该不全,望提醒补充):
1)CORS(跨域资源共享)(cross-origin resourse sharing)通过服务器的response响应头里参数标注(参考阮神的文章):
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials:true
2 )服务器代理 跨域是js的特性,服务端不受影响,所以可以用服务器来请求对应的数据,再返给前端,这个也是本人用的比较多的

然后就是前端来处理跨域问题
1)Ajax的jsonp 它利用的是html标签中src属性可以不受跨域影响的特性。这个写的比较全面
2)document.domain主要用于主域名相同的不同子域名之间的跨域
3)http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建

(三)
所有小姐姐问的是Vue的跨域在前端解决方案就是下面主要可以使Jsonp和proxy啦,先这到这,之后在补充
评论 3 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页

打赏作者

暗影刀客

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值