跨域演示

jsonp

jsonp代码

Web页面上调用js文件时不受跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);

jsonp就是利用了<script src="xxxx"> </script>这个标签不受跨域影响。

Paste_Image.png
Paste_Image.png
Paste_Image.png

CORS

CORS代码

CORS:全称为 Cross-Origin Resource Sharing,跨域资源共享,是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。

CORS的实现方式是,在后端的响应头添加一个
Access-Control-Allow-Origin 属性,属性的值是允许的域名。它的好处是前端的请求就是ajax,不需要修改,只要后端开访问权限即可,很方便。

Paste_Image.png
Paste_Image.png
Paste_Image.png

降域

降域代码
页面ifram内部嵌套一个网页,如果域名不同,就不能互相操作,因有跨域问题,如果域名的后缀是一样的,只是前面不一样,可以用降域来解决。

Paste_Image.png

postMessage

postMessage代码

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

  1. data:要传递的数据
  2. origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL]
Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、浏览器的同源策略 1.什么是同源? 所谓“同源”指的是”三个相同“。相同的域名、端口和协议,这三个相同的话就视...
    徐国军_plus阅读 867评论 1 3
  • 前段时间学习了AJAX,已经可以从后台拿到JSON串。可是出现了问题,目前我发送的请求都是在同域下的请求,如果我想...
    大春春阅读 1,063评论 2 13
  • 什么是同源策略 浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能...
    ezrealor阅读 504评论 0 1
  • 在世界的某个地方 一定有一个和我一样热切的人 在等候着一颗同样寂寞的心 我会装扮成最朴素的自己 踏上通往幸福的列车...
    南鄙人阅读 110评论 0 3
  • 我容易被感动 也容易满足 别人不经意对我的好 我会一直记得 我不坚强也不爱防备 我唯一能给别人的就是绝对的信任 不...
    可沁吖阅读 257评论 0 0