如何在本地伪装一个网站
1.编辑 hosts 文件
Mac：sudo vi/etc/hosts
Windows：hosts 文件的路径是:C:\Windows\System32\Drivers\etc\hosts，可以使用记事本等文字编辑器打开
2.添加一行 127.0.0.1 xxx.com
3.保存关闭
4.访问 xxx.com 端口号
如何监听 80 端口
Mac：sudo http-server -c-1 -p 80
Windows :
1.以管理员身份运行 git bash
2.http-server -c-1 -p 80
浏览器的同源策略
同源指的是协议相同，域名相同，端口相同。不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。
http://zhihu.com 这个网址，协议是 http://，域名是 zhihu.com，端口是80（默认端口可以省略）。
下面都不同源
1. http://zhihu.com vs http://www.zhihu.com
2. http://zhihu.com vs https://zhihu.com
3. http://zhihu.com vs http://zhihu.com:81
4. http://zhihu.com vs http://zhihu.com.cn
only http://zhihu.com vs http://zhihu.com
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
限制范围
1.Cookie、LocalStorage 和 IndexDB 无法读取。
2.DOM 无法获得。
3.AJAX 请求不能发送。
CORS
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。当一个资源从与该资源本身所在的服务器不同源请求一个资源时，资源会发起一个跨域 HTTP 请求。
1.简单模式 （GET、POST）
目标服务器在响应头里添加 Access-Control-Allow-Origin: http://xxx.com 即可,服务端仅允许来自 http://xxx.com 的访问
2.复杂模式（除了GET、POST）
Access-Control-Allow-Origin: http://xxx.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, PATCH, DELETE, HEAD
会发两次请求，第一次是 OPTIONS 请求，询问目标服务器是否允许 PUT/PAT等，如果允许，则发真正的请求。
JSONP
JSONP是服务器与客户端跨源通信的常用方法。
它的基本思想是，网页通过添加一个 script 元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
1.让目标网站在一个 xxx.js 里放置数据，形式是 JSON + Padding
window.qqUser = {
"name":"frank",
"qb":10000
}
2.本网站使用 script 加载 xxx.js
var script = document.createElement('script');
script.src = 'http://qq.com/xxx.js';
document.head.appendChild(script);
3.约定用 callback=xxx 来交流
function jsonp(url,fn){
var functionName = 'frank' + parseInt(Math.random()*10000,10);
window[functionName] = fn;
var script = document.createElement('script');
script.src = url + '?callback=' + functionName;
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)
}
{{callback}}({
"name":"frank",
"qb":10000
})
4.jQuery 用法
$.ajax({
url:'http://qq.com/xxx.js',
dataType:'jsonp',
success:function(data){
console.log('第一次')
console.log(data)
}
})
JSONP 和 AJAX 的区别
1.原理 JSONP 是 script，AJAX 是 JS 发出的请求
2.JSONP 只能 GET，AJAX 都行
3.JSONP 不太安全，因为大家都可以访问（没有限制），AJAX 有跨域限制
