第二十四章 跨域

一、跨域

1. 什么是跨域

• 跨域，是指当前浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
• 跨域问题也可以具体描述为：请求方使用XMLHttpRequest请求没有遵守同源策略且没有设置CORS规则的被请求方，都会被浏览器阻止，报错。

2. 同源策略

• 同源策略是浏览器用来约束数据请求的安全机制。同源策略要求：发起请求方和被请求方必须同协议、同域名、同端口，只要有一个不同，且被请求方没有设置CORS策略，那么本次请求会被认为跨域。
  • 协议：http 和 https
  • 域名：www.baidu.com 和 baike.baidu.com
  • 端口：:3000 和 :3001

3. 跨域的意义：

• 想象一个场景，A 网站是一家银行，用户登录以后，A 网站在用户的机器上设置了一个 Cookie，包含了一些隐私信息（比如存款金额）。用户离开 A 网站后，又去访问 B 网站，如果没有跨域限制，B 网站可以读取 A 网站的 Cookie，那么隐私信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。
• 但是，在互联网中，如果完全不能跨域，那么任意两个网络节点或服务器之间就不能够互通，每个设备都是一个封闭的网络，那互联网将不再有意义。

二、跨域的解决方案：

• CORS：遵守同源策略：在要请求的后端程序上设置访问控制允许源的头部信息
  • 纯后端
  • 简单，方便，不安全
• jsonp：不使用XMLHttpRequest发起请求，利用html标签可以跨域获取数据的特性，使用script标签发起请求，利用了script标签会将引入的文本资源作为js代码执行的特性，获取后端数据
  • 发起请求端和被请求端配合
  • 方便，安全，比较复杂
• 服务器代理：使用服务端发起跨域请求，不使用浏览器
  • 搭建代理服务器，由代理服务器发起向另一个跨域服务器的请求，请求到数据后，响应给自己的客户端，客户端从代理服务器上获取到跨域服务器的数据
  • 技术要求：至少要掌握一门后端语言的使用
  • 发起请求方解决，无需得到被请求方的支持
  • 方便，安全，特别复杂