面试回答跨域问题

端工程师面试中,经常遇到有关‘跨域’的面试题。‘跨域’是作为一个前端工程师无法避开的问题。那么,我们看看面试官怎么问(什么是跨域?谈谈你对跨域的理解?什么导致了跨域?你解决过跨域问题吗?你在工作中怎么解决跨域?跨域解决方案有哪些,了解过哪些?前后端分离,你有遇到跨域问题吗?...那么,带着这些问题,我们来分析一下,如何回答)===========================================================那么各位亲爱的学员,你对跨域了解吗?前后端分离,你遇到跨域问题了吗?跨域时,项目考虑安全性问题,后端设置通用允许跨域,是否有风险呢?前端跨域,一共有多少种解决方案,你知道吗?面试中,跨域问题,怎么说能体现你技术深度和广度,你知道吗?(空)今天我们就来重点解决一下面对,“工作中遇到的跨域问题如何解决?”这个问题怎样回答才能够体现出我们的技术水准。问题分析


1. 小白(罗列技术点)我们经常看到的回答一般是这样的,“跨域问题可以使用CORS设置请求头来解决,或者使用jsonp技术解决”。或者“我在工作中遇到过跨域问题,我是用jsonp解决的,还可以使用代理来解决”。这几种回答比较笼统苍白,还停留在小白的水准,而且还容易引起面试官的追问,当然啦,如果是水平较高的同学,使用这种“留槛”的方式和面试官形成互动也未尝不可。那么我们来看一下技术大牛会怎么回答这个问题呢?


2. 大牛(技术深度、广度)“对于跨域这个问题我个人的理解是这样的,首先,跨域问题的提出是基于同源策略的概念,也就是协议、域名、端口号三者保持一致才允许通信。跨域可以分为数据请求跨域和DOM查询跨域。那么我了解到的常见的跨域方式有以下几种:① 可以使用的jsonp方式,它需要前后端相互配合,原理是使用src本身支持跨域,低版本浏览器也可以使用,缺点是它只支持get方法,且只可以用于传递数据无法进行DOM查询,而且必须要后端配合,安全性低,然而实际工作中很容易遇到后端不提供跨域的情况。②还可以使用CORS设置请求头使其允许跨域,这种方式的优点是支持所有请求方式,也可以进行DOM查询,缺点是早期的浏览器不支持,并且也要求有后端的配合。③还可以使用iframe配合window自带的name属性,这种方式优点是操作简单,不要求后端配合,缺点是name的大小有限制,一般是2M左右。④此外还有h5新增的postMessage方法,通过onmessage的监听来接收数据,好处是使用简单,缺点是早期浏览器不支持。⑤还可以通过修改document.domain来实现跨域,只需要把两个网页的domain设置为一个主域即可,优点也是支持DOM查询,操作简便,缺点是它只适用于相同主域的子域之间进行跨域。后端通常会通过在服务器上设置代理页面的方式实现跨域,这里我们就不多阐述了。那么这些方式中我经常使用的是jsonp,它的原理是通过前后端配合实现跨域,运用了script标签的src属性可以跨域引入文件的特性。前端部分:定义一个函数用于接收参数。并且创建script标签,其中的src 属性引入后台的PHP或其他文件,通过get方式拼接(‘?callback=fn’)传给后台该函数的函数名。后台部分:后台接收到后返回一个‘调用该同名函数并传入参数’格式的字符串(‘fn([a,b,c])’),前端接收到该字符串后,自动解析并调用该函数完成参数接收”。大牛的回答在深度上,阐述了跨域问题出现的原因,jsonp的具体实现原理,在广度上,提供了多种跨域方式,并分析了各个方式的优缺点和应用场景,体现出了深厚的知识积累。但是这样的回答就已经是最好的了吗?不,我们来看一下,如果是面试大神,他会在怎么处理这个问题。


3. 大神(融入项目、技术延伸)支持跨域有:1、jsonp。2、iframe配合window自带的name属性来处理。3、h5新增的postMessage来操作。当然这些解决方案都不是常用方式,在实际开发当中并不实用,我来说说我在实际开发当中与后端配合的实际场景吧:如果是开发app那么就不符合同源策略肯定会出现跨域问题,那么我会让后端人员开启跨域功能,如果是php添加header("Access-Control-Allow-Origin: *"),如何是java添加response.setHeader("Access-Control-Allow-Origin", "*"),可以解决跨域问题,那么安全问题需要https协议来解决抓包软件截取数据。如果后端人员不配合开启跨域权限怎么办呢?其实后端人员不配合开启跨域是常有的事情,比如银行系统为了安全问题是不可能开启跨域的,他们会说:“你先在测试环境下开发,等上传到服务器上接口和网站是同一个域名就不存在跨域的问题。”但是咱们在本地开发还是会出现跨域问题,那么就需要安装chrome浏览器的cors插件来解决开发环境下面的跨域问题,等开发完成后上传到正式服务器就ok啦。那么分析到这里,我们就有了比较完善的回答思路了。我们的回答要在深度和广度上进行延伸和扩展,还要多运用具体的应用场景帮助表述,这样既能体现我们技术上的水平很高,又能让我们的回答具有可信度。这样的回答比较值得大家参考。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值