同源策略&跨域

同源策略

对于同源的定义，MDN给出了这样的解释：如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。

如何确定两个页面是否同源，只要比较两个页面的协议、域名和端口即可。

假设有这样一个页面http://zhihu.com/main.html，相对于它给出同源检测的示例：

同源策略是浏览器最核心也最基本的安全功能。保证用户信息的安全，防止恶意的网站窃取数据。限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

协议、端口、域名只要有一个不相同，就不符合同源策略，就会出现跨域。最常见的就是AJAX请求数据。

跨域的解决办法

一、JSONP
JSONP是如何产生的呢？

1.我们都知道使用AJAX直接请求普通文件存在跨域无权限访问的问题，甭管你是什么，只要你是跨域请求，一律不准不可以的；

2.但是我们知道HTML中的<script><img><iframe>等标签不受同源策略的影响，拥有跨域的能力。那我们是否能利用这个特性从其他域下获取数据呢

3.我们得出结论，要想在web端就跨域访问其他域的数据就有一个办法，那就是把数据装进 JS 格式的文件里，这样客户端就能够调用了。

4.但是获取的数据是做为 JS 来执行。于是就有一个问题，数据是 JSON 格式的数据，直接作为 JS 运行的话我如何去得到这个数据来操作呢？

5.于是我们想到是否可以提前在页面上声明一个函数，通过接口传参的方式发送给后台，在经过后台处理发送给前端（所以JSONP 需要对应接口的后端的配合才能实现。）

示例：
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这个请求到达后端后，后端会去解析callback这个参数获取到字符串showData，在发送数据做如下处理：

之前后端返回数据： {"city": "hangzhou", "weather": "晴天"} 现在后端返回数据： showData({"city": "hangzhou", "weather": "晴天"}) 前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行，这实际上就是调用showData这个函数，同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载提前在页面定义好showData这个全局函数，在函数内部处理参数即可。

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。

具体实现
server.js代码

server.PNG

index.html代码

index.PNG

打开Git Bash，进入server.js所在文件夹，输入 node server.js ，浏览器打开 http://localhost:8080/index.html

于是我们得出JSONP的原理：

• JSONP本质上是利用 <script><img><iframe>等标签不受同源策略限制，可以从不同域加载并执行资源的特性，来实现数据跨域传输。
• JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
• JSONP的想法就是，与服务端约定好一个回调函数名，服务端接收到请求后，将返回一段 JS代码，在这段JS代码中调用了约定好的回调函数，并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后，就会执行这个回调函数，这时数据已经成功传输到客户端了。