26. 跨域

26.1 同源策略

同源的定义:源 = 协议 + 域名 + 端口

浏览器规定: js不允许获取不同源的数据 , 例如: 运行在源A的js, 不允许获取源B的数据

---

为啥要设置同源策略?

为了保护用户隐私. 用户点击钓鱼网站, 那么这个网站就能模仿用户发送Ajax请求, 这样就会导致隐私泄漏.

---

隐私泄漏的根源

qq空间的js, 和黑客网页里的js发送的请求几乎没有区别(referer有区别). 后台开发者没有检查referer, 那就完全没有区别.

---

为什么可以跨域使用css, js和图片等?

同源策略限制的是数据访问, 我们引用css, js, 图片. 但是我们无法知道里面的内容.

---

26.2 解法一: CORS

后台对浏览器进行提前声明:

else if (path === '/qq.json') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/json;charset=utf-8')
    	//后台设置响应头, 来告诉浏览器别拦截
        response.setHeader('Access-Control-Allow-Origin', 'http://tianzc.com:8889')
        let jsString = fs.readFileSync('db/qq.json')
        response.write(jsString) 
        response.end()
    } 

允许所有:

else if (path === '/qq.json') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/json;charset=utf-8')
    	
    	//后台设置响应头, 来告诉浏览器别拦截
        response.setHeader('Access-Control-Allow-Origin', request.headers['referer'])
        let jsString = fs.readFileSync('db/qq.json')
        response.write(jsString) 
        response.end()
    } 

###26.3 解法二: jsonp 方法

为啥需要jsonp?

ie 6,7,8,9 :说你猜我支持不支持CORS？

jsonp 原理是啥?

利用可以引用不同源的js, 来走私数据.

1. 后台传回的js可以定义一个全局变量:

   window.__callback__ = [
       {"女友1": "新垣结衣"},
       {"女友2": "张碧晨"}
   ]
   

2. 后台传回的js可以执行一个回调函数:

   window.xxx([
       {"女友1": "新垣结衣"},
       {"女友2": "张碧晨"}
   ])
   

---

jsonp的p是啥意思?

ｊｓｏｎｐ的ｐ就是ｐａｄｄｉｎｇ，　ｗｉｎｄｏｗ．ｘｘｘ就是填充物，　ｐａｄｄｉｎｇ

---

jsonp的优化?

1. ｊｓｏｎｐ方案也可以做ｒｅｆｅｒｅｒ检查

2. 用随机数代替：　ｘｘｘ，　将随机数ｒａｎｄｏｍ通过查询参数传递给给后台．就不会引起冲突，　占用任何全局变量

3. script加载后立马删除

   script.onload = ()=>{
       script.remove()
   }
   

---

jsonp 优缺点

优点:

1. 支持ie
2. 支持跨域

缺点:

1. ｓｃｒｉｐｔ标签：　读不到像ＡＪＡＸ一样精确的状态，　
2. ｊｓｎｏｐ是ｓｃｒｉｐｔ的不支持ｐｏｓｔ请求．