同源策略、跨域、jsonp

1.什么是同源策略

同源是指协议、域名以及端口相同。
同源策略是在没有明确授权的情况下，源内的脚本不能读写非同源的数据。

2.什么是跨域？跨域有几种实现形式

跨域就是从一个域名的网页去请求另一个域名的网页的资源。

• 降域：使用例如document.domian='a.com'，并且两者基础的域名需要相同，例如child.a.com和xxx.a.com，此外降域只能从较长的域名降级为较短而不能再反过来变长。例如child.a.com了一降为a.com而不能从a.com降为child.a.com。

• JSONP：原理是利用<script>标签没有跨域限制的功能，来达到与第三方通讯的目的。当需要通讯时，本站建立一个<script>元素，地址指向第三方网址，例如<script src="a.com/?callback=function">，并提供回掉函数来接收数据。第三方提供的响应为JSON数据的包装（故称之为JSONP）例如data({"name","frank","age","24"}),这样浏览器会调用callback函数，并传递解析后的JSON对象作为参数，本站的脚本可在callback函数里处理所传入的数据。

• CORS：Access-Control-Allow-Origin的缩写。假设服务器A（a.com）在响应头中加上Access-Control-Allow-Origin:*，其他客户端就能向服务器A发送跨域请求。在这里，加上响应头的是需要被跨域访问的资源本身，而不是发送跨域请求的主体——文档。

• postmessage（）：postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。postMessage(data,origin)方法接受两个参数，data是要传递的数据，origin是目标的源，协议+主机（这里应该是指域名吧）+端口号

  参考：http://www.cnblogs.com/dolphinX/p/3464056.html

• hash：原理是利用location.hash来进行传值。

• window.name:利用window.name+iframe。
  以上两者不常用，故不做过多介绍
  参考：http://blog.csdn.net/joyhen/article/details/21631833

降域实践

先改写hosts文件，绑定127.0.0.1到child.b.com和b.com，并写两个页面，这里采用XAMPP模拟，当输入网址b.com时候，自动跳转到b.com/dashboard，所以页面的index.html放入dashboard文件夹中，而main.js和1.html放入htdocs中

index.html

Paste_Image.png

1.html

Paste_Image.png Paste_Image.png Paste_Image.png

其中iframe为window对象

Paste_Image.png

当访问iframe.name时,被同源策略制止

Paste_Image.png

双方添加document.domain='b.com'后，可以访问

Paste_Image.png Paste_Image.png Paste_Image.png

JSONP实践

设置a.com和b.com

Paste_Image.png Paste_Image.png

index.html

Paste_Image.png

main.js

Paste_Image.png Paste_Image.png

这其实是b.com/main.js的函数在a.com运行而不是a.com实际拿到了b的数据哦
之后改写后端代码（php版本不会写，以下部分图片是视频中的版本）

Paste_Image.png Paste_Image.png

这样的话在a下会显示出callback后的XXX，并且因为有window.xxx的那个方法，所以当js中的内容为xxx（'123'）时候，a.com会弹出alert对话框，内容为123

Paste_Image.png

那么如何用JSONP动态的请求数据呢?

index.html

Paste_Image.png

不会写的后端语言

Paste_Image.png

然而并不需要后端这块

我神奇地发现即使没有后端文件，一样可以询问到frank（静态访问？？？？不是说JSONP是动态的访问数据吗。。。）。。。没明白这里后端文件起了什么作用。。。。是指所谓的静态和动态引用的区别么。。。希望老师解答一下，一涉及到和后端互动，对整个流程的把我就比较混乱

Paste_Image.png Paste_Image.png

CORS实践

data

Paste_Image.png

index.html

Paste_Image.png

main.js

Paste_Image.png

后端写法（视频）

Paste_Image.png

版权归ENVY和饥人谷所有，转载请注明出处