【前端面试】前端工程师不得不知道的跨域解决方案

【摘要】 常见的跨域方式大概有七种,大致可分为iframe、api跨域1、JSONP全称为jsonwithpadding,解决老版本浏览器跨域数据访问问题,原理是web页面...

常见的跨域方式大概有七种,大致可分为iframe、api跨域

1、JSONP

全称为json with padding,解决老版本浏览器跨域数据访问问题,原理是web页面调用JS文件不受浏览器同源策略限制,所以通过script标签可以进行跨域请求,流程如下:

首先前端设置好回调参数,并将其作为URL的参数

服务器端收到请求后,通过该参数获取到回调函数名,并将数据放在参数中返回

收到结果后因为是script标签,所以浏览器当做脚本运行,

2、cors

全称是跨域资源共享,允许浏览器向跨源服务器发出XMLHTTP Request请求,从而克服了ajax只能同源使用的策略,实现cors的关键是服务器,只要服务器实现了cros接口,就可以跨域通信

前端逻辑很简单,正常发起ajax请求即可,成功的关键在于服务器 Access-Control-Allow-Origin 是否包含请求页面的域名,如果不包含的话,浏览器将认为这是一次失败的异步请求,将会调用 xhr.onerror 中的函数。

前端工程师面经-优选经验.jpg

Cros使用简单,支持POST方式,但是存在兼容问题

浏览器将cors请求分为两类,简单请求和非简单请求,对于简单请求,浏览器直接发出cors请求,就是在头信息之中增加一个origin字段,用于说明本次请求来自哪个协议+域名+端口,服务器根据这个值,决定是否同意本次请求,如果服务器同意本次请求,返回的响应中会多出几个头信息字段:

Access-Control-Allow-Orign:返回origin的字段或者*

Access-Control-Allow-Credentials,该字段可选,是一个bool值,表示是否允许发送cookie,

Access-Control-Expose-Headers

参考:http://www.ruanyifeng.com/blog/2016/04/cors.html

3、服务器代理:

即当你有跨域的请求操作时发给后端,让后端帮你代为请求,

此外还有四中不常用的方式,也可了解下:

location.hash:

Window.name

postMessage

版权声明:《 【前端面试】前端工程师不得不知道的跨域解决方案 》为作者小菜鸡原创文章,转载请注明出处!
最后编辑:2019-9-15 14:09:59
发表评论 / Comment

用心评论~

金玉良言 / Appraise
出家为尼,LV1游客
2019-11-24 02:57
很全面