跨域演示

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