运行方式
-
伪装一个网站（在本地）
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.com1.3. 保存关闭
-
监听 80 端口
Mac：sudo http-server -c-1 -p 80
Windows：
- 以管理员身份运行 git bash
- http-server -c-1 -p 80
浏览器的同源策略
同域名（或ip）,同端口，同协议视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。只有浏览器上才有同源政策。
举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。
- http://www.example.com/dir2/other.html：同源
- https://www.example.com/dir/other.html：不同源（协议不同）
- http://.example.com/dir/other.html：不同源（域名不同）
- http://www.example.com:81/dir/other.html：不同源（端口不同）
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
限制范围
- Cookie、LocalStorage 和 IndexDB 无法读取。
- DOM 无法获得。
- 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)
}
- 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 有跨域限制
