跨域-CORS-JSONP那。。检查referer不就好了?

跨域

同源策略

不同源的页面之间，不准互相访问数据
源（window.origin或location.origin可以得到当前源）
源 = 协议 + 域名 + 端口号

如果两个url的协议、域名、端口号完全一致，那么这两个url就是同源的
同源的定义
浏览器规定如果JS运行在源A里，那么就只能获取源A的数据，不能获取源B的数据，即不允许跨域访问
假设xiaokeai.com/index.html引用了cdn.com/1.js那么就说[1.js运行在源xiaokeai.com里]，注意这跟cdn.com没有关系，虽然1.js从它那下载,所以1.js就只能获取frank.com的数据，不能获取1.frank.com或者qq.com
浏览器故意设置的一个功能限制

问题的根源
无法区分发送者
QQ空间页面里的JS和黑客网页里的JS发送的请求几乎没有区别(referer有区别)，如果后台开发者没有检查refer,那么就完全没有区别,所以没有同源策略，任何页面都能拿走你的数据
那。。检查referer不就好了?
安全原则:安全链条的强度取决于最弱的一环
所以浏览器应该主动预防这种偷数据的行为

修改hosts

设置本地域名映射
让qq.com映射到127.0.0.1

"C:\Windows\System32\drivers\etc\hosts" //用记事本打开这个文件
//

演示跨域访问被拦截

代码链接：修改hosts(管理员运行记事本-文件打开-C-Windows-System32-drivers-etc-选所有文件查看隐藏文件-hosts-建议不要删默认的) 同源策略限制的是数据访问，我们引用CSS、JS和图片的时候，其实并不知道内容，我们只是在引用

2.CORS (跨域资源共享)

响应头里添加可以访问的url

console.log(request.headers['referer'])//可以查看请求头

设置响应头

if (path === '/friends.json') {
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/json;charset=utf-8")
    response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8081/");//*代表都允许访问
    response.write(fs.readFileSync('./friends.json'))
    response.end();
}

3.JSONP
IE不支持CORS所以前端工程师们想出通过将数据写入JS文件，用script去访问JS文件的方式来实现跨域
用JS将数据放到window上，写入响应的时候进行替换
优点:兼容IE,跨域
缺点:由于是script标签所以读不到ajax那么精确的状态，只可以发get请求,不支持post 服务器响应设置

访问代码

步骤
1.图一将数据写到/friends.js
2.图二用script标签引用/friends.js
3.图一收到请求/friends.js执行图2定义好的window[random]函数(回调)