跨域

1: 什么是同源策略

同源策略(same origin policy),是指浏览器处于安全方面的考虑,只允许在 同协议、同域名、同端口下的接口进行交互,不同源的客户端脚本在没有客户端授权下,不能读写对方资源,同源策略 有效阻止了一些危险行为。

2:什么是跨域?跨域有几种实现形式

跨域:js在不同域之间进行数据传输或者通信,比如AJAX向一个不同域请求数据,或者通过JS获取页面中不同域的框架数据。

跨域实现方法:jsonp CORS 降域 PostMessage

3: JSONP 的原理是什么

HTML中的Script标签可以引入其他域下的JS,利用这个特性,可以实现跨域访问接口。、
1.定义数据处理函数function
2.创建script标签,src的地址执行后端接口,最后加个参数callback=function
3.服务器收到请求后,解析参数,计算返还数据,输出function(data)字符串
4.function(data)会放到script标签作为js执行。此时胡调用函数,将data作为参数

4: CORS是什么

CORS是跨源资源共享(Cross-Origin Resource Sharing (CORS))。它是W3C委员会制定的一个新的标准,他的好处在于可以令开发者使用普通的XHLHttpRequest来发起请求与获取数据,而跨域的服务器端只需要在返回数据的时候设置Access-Control-Allow-Origin:即可。可以替换为任何已授权的域名。

五、演示四种跨域问题解决方法

JSONP 的使用
(1)动态创建 script 标签,src 地址指向数据接口,并传递 callback 参数
(2)定义数据处理函数
(3)服务端接收请求,解析参数,计算数,返回回调函数字符串
(4)将回调函数字符串引入页面并作为 JS 去执行:此时会调用数据处理函数,数据会作为数据处理函数的参数被处理计算出一个结果



CORS 的使用
(1)前端:正常使用 AJAX 发送请求(浏览器会自动加入请求头:Origin)
(2)服务端:若确定接受请求,则在返回结果中加入响应头:Access-Control-Allow-Origin


降域的使用
(1)A 页面域为:hello.ly.com;B 页面域为:hi.ly.com
(2)A 和 B 两页面都需加入该行代码:document.domain = 'ly.com'; ,ly.com 是hello.ly.com 和 hi.ly.com 的主域名



postMessage 的使用
(1)发送方:为目标元素添加事件处理程序,并发送 message
(2)接收方:为 window 添加事件处理程序,事件类型为 messag


以上的代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑,只允许与本...
    FLYSASA阅读 1,782评论 0 6
  • http协议 Resource,URL,Request,Response,Headers http 请求的是资源R...
    Sharise_Mo佩珊阅读 707评论 0 4
  • 什么是同源策略 同源政策(same-origin policy)是指同域名(或ip),同端口,同协议视为同一个域,...
    小囧兔阅读 586评论 0 1
  • 1. 什么是同源策略 浏览器限制不同源的两个网站间脚本和文本的相互访问,只允许访问同源下的内容。所谓同源,就是指两...
    熊蛋子17阅读 704评论 1 6
  • 每个人其实都活在自己的世界里,无论是想要被人理解还是要试图摆脱孤独,首先都要先改变自己,打开自己的世界去接...
    晗昊阅读 162评论 0 0