7-5 前后分离（同源策略、修改host、跨域）

跨域

1.跨域关键知识

• 同源策略
  浏览器故意设计一个功能限制
• 跨域
  当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
• CORS
  突破浏览器限制的一个方法
• JSONP
  IE时代的妥协

2.同源策略

2.1 同源定义

• 源
  window.origin或location.origin可以得到当前源
  源=协议+域名+端口号
  
• 如果两个url的
  协议
  域名
  端口号
  完全一致，那么这两个url就是同源
• 举例
  1.https://qq.com 和 https://www.baidu.com 不同源
  2.https://baidu.com 和 https://www.baidu.com 不同源
  3.只有完全一致才算同源

2.2 同源策略定义

• 浏览器规定
  1.如果JS运行在源A里，那么就只能获取源A的数据
  2.不能获取源B的数据，即不允许跨域
• 举例
  1.假设frank.com/index.html 引用了 cdn.com/1.js
  2.那么就说 [ 1.js 运行在源 fank.com里 ]
  3.注意：这跟cdn.com没有关系，虽然 1.js 从它那里下载
  4.所以 1.js 就只能获取 frank.com 的数据
  5.不能获取 1.fank.com 或者 qq.com的数据
• 这就是浏览器的功能
  浏览器故意这样设计的

2.3 浏览器这样做的目的

• 为了保护用户隐私
• 例如用户已经登陆QQ空间，AJAX请求/friend.json可获取用户好友列表
• 当有个钓鱼网站，你不小心点开这个网页登陆，那这个网页也请求你的好友列表
• 如果没有同源策略，那么你的好友列表就被黑客偷走了
• 因此：只要URL有一丁点不一样，都不能访问数据

2.4 同源策略

• 不同源的页面之间，不准互相访问数据

3.案例（创建两个网站来演示一下）

3.1 步骤

• 创建目录
  qq-com 里面有一个 server.js，用来模拟QQ空间
  lzy-com 里面有一个 server.js，用来模拟钓鱼网站
• qq-com
  /index.html 是首页
  /qq.js 是脚本文件
  /friends.json 是模拟好友数据
  端口监听为：8888，访问 http://127.0.0.1:8888
• lzy-com
  /index.html 是首页
  /lzy.js 是脚本文件
  端口监听为：9999，访问 http://127.0.0.1:9999
• 使用qq.js去访问friends.json成功
  使用 lzy.js 去访问friends.json 失败

3.2 host

• 除了端口号，想让域名也不一样
• 修改host即可
• window——记事本——右键：以管理员身份运行——文件——打开——C盘——windows——System32——drivers——etc——文件类型：所有文件——host——打开
  不要删除默认内容
  直接回车在后面加上

127.0.0.1 lzy.com
127.0.0.1 qq.com

• 意思是：
  如果我访问：lzy.com，请直接请求 127.0.0.1
  如果我访问：qq.com，请直接请求 127.0.0.1
  IP在前，域名在后，保存
• 打开终端——ping qq.com
  

3.2.1 设置本地域名映射

• 通过以上步骤让
  qq.com 映射到 127.0.0.1，直接访问：http://qq.com:8888/index.html
  lzy.com 映射到 127.0.0.1，直接访问：http://lzy.com:9999/index.html

3.3 跨域AJAX

• 正常使用AJAX
  在 qq.com:8888 里运行的JS可以访问 /friends.json
  
• 黑客偷数据
  在 lzy.com:9999 里运行JS不能访问
  浏览器需要 CORS
  
• 提问
  1.请求发送成功了没有？
  答：成功了，因为qq.com后台有log
  2.黑客拿到响应了没有？
  答：没有，因为浏览器不给数据给它

3.4其他疑问

• 为什么 a.qq.com 访问 qq.com 也算跨域？
  答：因为历史上出现过不同公司共用域名
• 为什么不同端口也算跨域？
  答：因为以前服务器很贵，出现过不同公司共用一个服务器
• 为什么两个网站IP一样也算跨域？
  答：原因同上，IP可以共用
• 为什么可以跨域使用 CSS、JS 和图片等？
  答：同源策略限制的是数据访问，我们引用CSS、JS和图片的时候，其实不知道其内容，只是在引用文件，不能读取内容。