同源和跨域

运行方式

1. 伪装一个网站（在本地）

   1.1 编辑 hosts 文件

   • mac: sudo vi /etc/hosts
   • windows: 用以管理员身份运行 git bash，vi C:/Windows/System32/drivers/etcetc/hosts

   1.2. 添加两行
   127.0.0.1 qq.com
   127.0.0.1 frank.com

   1.3. 保存关闭

2. 监听 80 端口

   • Mac：sudo http-server -c-1 -p 80

   • Windows：

   1. 以管理员身份运行 git bash
   2. http-server -c-1 -p 80

浏览器的同源策略

同域名（或ip）,同端口，同协议视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。只有浏览器上才有同源政策。

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。

1. http://www.example.com/dir2/other.html：同源
2. https://www.example.com/dir/other.html：不同源（协议不同）
3. http://.example.com/dir/other.html：不同源（域名不同）
4. http://www.example.com:81/dir/other.html：不同源（端口不同）

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

限制范围

1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 无法获得。
3. AJAX 请求不能发送。
   下面我将说一下针对浏览器下不同源的AJAX 请求不能发送所采取的两种跨域措施（实际上是发送了的，但是由于同源保护，无法读取到数据）

CORS跨域请求

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。但是只有在ie8以上支持。
它的基本思想是:它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

1.简单模式 （GET、POST）
目标服务器在响应头里添加 Access-Control-Allow-Origin: http://xxx.com 即可,服务端仅允许来自 http://xxx.com 的访问

response.setHeader('Access-Control-Allow-Origin', 'http://frank.com')

2.复杂模式（除了GET、POST）
目标服务器在响应头里添加以下代码

response.setHeader('Access-Control-Allow-Origin', 'http://frank.com')
response.setHeader('Access-Control-Allow-Methods','POST,GET ,OPTIONS,PUT,PATCH,DELETE,HEAD')

会发两次请求，第一次是 OPTIONS 请求，询问目标服务器是否允许 PUT/PATCH等，如果允许，则发真正的请求。

JSONP跨域请求

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持。
它的基本思想是，网页通过添加一个 script 元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

原理：

1.首先是利用script标签的src属性来实现跨域。

2.通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。

3.由于使用script标签的src属性，因此只支持get方法
1.让目标网站在一个 xxx.js 里放置数据，形式是 JSON + Padding

{{callback}}({
"name":"frank",
"qb":10000
})

2.本网站使用 script 加载 xxx.js

var script = document.createElement('script');
script.src = 'http://qq.com/xxx.js';
script.onload = function () {
       console.log('加载xxx.js成功')
      console.log(window.frankUser)
}
document.head.appendChild(script);

3.约定用 callback=xxx 来交流
将2的代码改成如下：

function xxx(data){
    console.log('我得到的数据是')
    console.log(data)
}
var script = document.createElement('script')
script.src = 'http://qq.com/xxx.js?callback=xxx'
document.head.appendChild(script)

在nodejs上修改代码如下：

if(path === '/xxx.js'){
var callback = query.callback
var string = fs.readFileSync('./xxx.js', 'utf8')
response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
setTimeout(function(){
response.end(string.replace('{{callback}}', callback))
}, Math.random() * 1000)
}

重点： 文件xxx.js加载到浏览器，就会调用xxx,json数据就会被当成参数传入xxx函数
4.将3的修改好的代码做封装

jsonp('http://qq.com/xxx.js',function(data){
    console.log('第一次')
    console.log(data)
})
jsonp('http://qq.com/xxx.js',function(data){
    console.log('第二次')
    console.log(data)
})
function jsonp(url,fn){
    var functionName='Frank'+parseInt(Math.random()*100000,10)
    window[functionName]=fn
    var script = document.createElement('script')
    script.src = url+'?callback='+functionName
    document.head.appendChild(script)
}

5. jQuery 用法

$.ajax({
url:'http://qq.com/xxx.js',
dataType:'jsonp',
success:function(data){
console.log('第一次')
console.log(data)
}
})

JSONP 和 CROS 的区别

1.原理 上JSONP 是 script，CROS 是 JS 发出的请求
2.JSONP 只能 GET，CROS 都行
3.JSONP 不太安全，因为大家都可以访问（没有限制），CROS 有跨域限制