Vue 前端跨域的解决方案(心得记录)
背景:今天面试一面和二面都还ok,三面是两个小姐姐(工作性质应该是外包驻场,所以有甲方来面),简历上巴拉巴拉的简单聊了一下,到了关键了,小姐姐说问一下基础的东西(这也是最怕的,毕竟Vue我之前用的挺浅,局限在项目所用),小姐姐问,怎么解决Vue项目中的跨域问题。我当时虎躯一震,用服务器代理解决,我们之前的项目都是这么干的,简单省事,当时还想说jsonp的,但是怕错了,没敢说,结果可想而知,表现..
背景:
今天面试一面和二面都还ok,三面是两个小姐姐(工作性质应该是外包驻场,所以有甲方来面),简历上巴拉巴拉的简单聊了一下,到了关键了,小姐姐说问一下基础的东西(这也是最怕的,毕竟Vue我之前用的挺浅,局限在项目所用),小姐姐问,怎么解决Vue项目中的跨域问题。
我当时虎躯一震,用服务器代理解决,我们之前的项目都是这么干的,简单省事,当时还想说jsonp的,但是怕错了,没敢说,结果可想而知,表现一般,小姐姐就问俩问题,都答的不好,所以结束之后,我赶快补习了一下。
1.域名不同具体为什么会有跨域,当然是为了安全,为了防止在用户不知情的情况下浏览器悄悄的做一些恶意操作(例如,恶意加载,钓鱼网站),嗯,再多的话,由于项目经历有限,大家可以自行度娘。
2.协议不同
3.端口不同
- 通过后端解决
这个主要解决端口和协议跨域的问题。 - 在前端解决
然后是详细的方法了,后端方法有(应该不全,望提醒补充):
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脚手架搭建
更多推荐
所有评论(0)