关于同源政策

什么是同源政策
同源政策的目的
使用 JSONP 解决同源限制问题
封装 jsonp 方法
第二种非同源请求限制的解决方案 ----CORS跨域资源共享

1. Ajax 请求限制

Ajax只能向自己的服务器端发送请求。

比如现在有一个A网站，有一个B网站，A网站中的HTML文件 只能向A网站服务器中发送Ajax请求，B网站中的HTML文件 只能向B网站服务器中发送Ajax请求，但是A网站是不能像B网站发送Ajax请求的，同理，B网站也不能向A网站发送 Ajax请求

2. 什么是同源政策

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，只要其中有一个不相同，就是不同源。 如下：

3. 同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。

最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是，无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错

4. 使用 JSONP 解决同源限制问题

jsonp是json with padding 的缩写，它不属于ajax，但它可以模拟Ajax请求

1. 将不同源的服务器端请求地址写在script标签的src属性中

2. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数

3. 在客户端全局作用域下定义函数fn

4. 在 fn 函数内部对服务器端返回的数据进行处理

具体代码示例如下：

JSONP 代码优化

1. 客户端需要将函数名称传递到服务器端
2. 将script请求的发送变成动态请求
3. 封装jsonp函数，方便请求发送
4. 服务器端代码优化之res.jsonp方法

5. 封装 jsonp 方法

上述封装方法的不足之处

改进一：将fn1和jsonp进行关联

改进二： 关于函数的名字

封装jsonp的函数内部，当前，无论我们发送多少次请求，函数的名字永远是fn1。

这样会存在一个潜在的问题，当我们连续发送请求时，即连续调用jsonp函数的时候。后发送的请求往window对象下面挂载fn1函数，会覆盖先发送的请求挂载到window对象下面的fn1函数。

所以，在封装jsonp函数内部，函数的名字不能是一个写死的名字

改进如下：

再一次优化：一个请求要传递多个参数

从之前优化的代码可以看出： 该请求只传递了一个参数callback参数

和ajax函数一样，我们要在调用的时候传递一个data属性，属性的值是一个对象，对象当中存储的就是我们想要向服务器端发送的请求参数。

jsonp解决方案当中的请求，属于get请求。因为它是通过script标签中的src属性发送的请求

又一轮优化：对服务器端代码进行优化

对服务器端代码优化的结果：

6. 第二种非同源请求限制的解决方案 ----CORS跨域资源共享

CORS： 全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送ajax请求，克服了Ajax只能同源使用的限制。

• 它与jsonp不同，jsonp是绕过了同源限制，发送的也不是ajax请求。
• 这种解决方案是在服务器端进行一些配置，客户端保持原有代码即可
• 服务器端允许你跨域访问（进行了配置），就可以访问，没有进行配置，就不允许

Node服务器端设置响应头代码示例：