面试题52:说一说跨域是什么?如何解决跨域问题?JSONP的原理

标准回答


跨域:

当前页面中的某个接口请求的地址和当前页面的地址如果协议域名端口其中有一项不同,就说该接口跨域了。

面试题52:说一说跨域是什么?如何解决跨域问题?JSONP的原理_第1张图片
跨域限制的原因:

 浏览器为了保证网页的安全,出的同源协议策略。

同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
 

面试题52:说一说跨域是什么?如何解决跨域问题?JSONP的原理_第2张图片

跨域解决方案

(跨域资源共享)cors:目前最常用的一种解决办法,通过设置后端允许跨域实现。
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

面试题52:说一说跨域是什么?如何解决跨域问题?JSONP的原理_第3张图片

node中间件、nginx反向代理:跨域限制的时候浏览器不能跨域访问服务器,node中间件和nginx反向代理,都是让请求发给代理服务器,静态页面面和代理服务器是同源的,然后代理服务器再向后端服务器发请求,服务器和服务器之间不存在同源限制。

JSONP:利用的原理是script标签可以跨域请求资源,将回调函数作为参数拼接在url中。后端收到请求,调用该回调函数,并将数据作为参数返回去,注意设置响应头返回文档类型,应该设置成javascript。
面试题52:说一说跨域是什么?如何解决跨域问题?JSONP的原理_第4张图片
面试题52:说一说跨域是什么?如何解决跨域问题?JSONP的原理_第5张图片

 jsonp的原理是什么?

       整体来说,jsonp实现跨域的原理是跨域的服务端把客户端所需要的数据放进客户端本地的一个js方法里,进行调用,客户端在本地的js对返回的数据进行处理。这样就实现了不同域名下的两个站点间的交流。

       由于

你可能感兴趣的:(javascript,面试,前端,javascript)