同源策略&跨域

同源策略&跨域

同源策略

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

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

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

URL	结果	原因
http://zhihu.com/other.html	成功	只有路径不同
http://zhihu.com/a/another.html	成功	只有路径不同
https://zhihu.com/page.js	失败	不同协议（https和hhtp）
http://zhihu.com:81/a.html	失败	不同端口 ( http:// 80是默认的)
http://news.com/b.html	失败	不同域名 ( news和zhihu )

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

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

跨域的解决办法

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

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

2.但是我们知道HTML中的

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

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

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本质上是利用