前端网络之同源策略

同源策略

同源策略是浏览器的一个安全策略机制。
源 = 协议 + 主机 + 端口，当中URL的协议、域名、端口号都一样叫同源，两个源不同称为跨源、跨域。

同源策略是指：页面的源和页面运行时加载的源不同时，出于安全考虑，浏览器会对跨域的资源访问进行一些限制。
这里需要明确的是，跨域是发生在浏览器端的，在后端是不存在跨域问题。

同源策略对 ajax 的限制是最大的，默认情况下，浏览器不允许访问跨域资源。

举个例子：页面源是 http://localhost:5050，页面中有加载 http://www.baidu.com 资源。
域名不同：localhost 与 www.baidu.com不同
端口号不同：不写端口号默认 80

详细分析一下跨域发生在哪个地方：

1. 浏览器请求发出去了
2. 服务器也接收到请求了
3. 服务器也能处理请求
4. 服务器也能给出响应结果
5. 浏览器也能接收到响应结果
6. 此时 我们的代码还在等着请求结果
7. 浏览器拿到结果后要把结果递交给代码，此时监测到当前页中的 URL 与请求的 URL 不同源，所以浏览器判定跨域了，报了一个跨域错误
8. 代码没有接收到结果，得到一个错误

也就是说，跨域发生在浏览器递交结果给代码的前一刻，浏览器发现协议或域名或端口不同进而判定跨域，使得代码没有获得到响应结果而是报了一个跨域的错误。

解决跨域问题

CORS

CORS：（Cross-Origin Resource Sharing）跨域资源共享，基于 http 1.1 的跨域解决方案。
实现思想：如果浏览器要跨域访问服务器的资源，需要获得服务器的许可。
但是，不同的请求对服务器产生的影响也是不同的。
针对不同的请求，CORS 规定了三种不同的交互模式：

• 简单请求
• 需要预检的请求
• 附带身份凭证的 请求

简单请求

简单请求必须同时满足以下条件：

1. get、post、head 请求
2. 请求头中，仅包含安全的字段，没有其他不相干字段
   • 不能携带自定义的请求头字段
3. 请求头中的 Content-Type 的值，必须是下面中的一个
   • text/plain
   • mulipart/form-data
   • application/x-www-from-urlencoded

简单请求的交互规则：

• 浏览器会在请求头中自动添加 Origin 字段，把当前请求跨域资源的页面源附带过去
• 服务器处理请求，并在响应头中添加两个字段
  • Origin：进行跨域请求的页面源
  • Access-Control-Allow-Origin：服务器允许跨域访问资源的源

需要预检的请求

预检请求流程：浏览器先发送预检请求，再发真实请求。

1. 浏览器发送预检请求，询问服务器是否可以跨域
   • options 请求是预检请求
   • 无请求体
   • 请求头
     • Origin 字段，携带跨域访问的页面源
     • Access-Control-Request-Method，真实请求方法
     • Access-Control-Request-Header，真实请求中其他的请求字段
2. 服务器允许跨域，则进行真实请求；不允许，则直接终止
   • 预检请求的响应
   • 无响应体
   • 响应头包含
     • Access-Control-Allow-Origin：允许跨域的源
     • Access-Control-Request-Method：允许跨域的请求方法
     • Access-Control-Request-Headers：允许跨域请求时携带的请求头字段
     • Access-Control-Max-Age：缓存时间，下次再发同样的真实请求，不需要再进行预检请求
3. 进行真实请求，真实请求流程同简单请求

附带身份凭证的请求

请求时，携带 cookie、token 等身份令牌。

• 配置 credentials
• 请求时携带 cookie
• 需要进行预检请求
• 服务器处理预检请求
  • 无响应体
  • 响应头包含 Access-Control-Allow-Credentials: true

服务器代理

配置代理。
服务器代理的话，就是用一个跟客户端同源的服务器请代理客户端发出请求，这样就成了两个服务器之间的通信，服务器访问服务器是不存在跨域问题的，这样也就解决了跨域。
我只知道这个原理，这些是后端内容，后端才能实现，这里就是简单说下怎么实现的。

来个图吧：

JSONP

JSONP 的全称：JavaScript json and padding
JSONP 解决跨域问题需要后端的配合，这跟JSONP的原理有关。

JSONP 的原理就是动态创建一个 script 标签，使用标签的 src 属性发请求。
核心点：

• 动态创建 script 标签
• 随机生成一个函数名
• 把生成的函数挂载在 window 的身上，并指向请求成功后 success 的回调
• 指定 src 属性的值为请求 URL 地址，并添加一个参数 ：callback = 函数名
• 最后把 script 标签添加到页面中

因为通过 script 标签引入的资源，不管是什么语言，它都会把资源内容当作 js 代码去执行。
这样就需要后端的支持，帮我们把 callback 的值与响应结果拼接在一起，返回给前端了
这样前端就能通过 sucess 回调函数获取相响应结果。

用代码解释：

  let $ = {
      ajax: function (options) {
          let url = options.url;
          let type = options.type;
          let dateType = options.dateType;
          let targetProtocol = "";
          let targetHost = "";
          // 1.获取请求URL的协议 域，判断是否同源
          // 不含http  访问得是相对路径，相对路径一定是的同源
          if (/https?:\/\//.test(url)) {
              // 1.1 url中存在http或https时不是相对路径
              let targetUrl = new URL(url);
              targetProtocol = targetUrl.protocol;
              targetHost = targetUrl.hash;
          } else {
              // 1.2 是相对路径同源的，直接获取
              targetProtocol = location.protocol;
              targetHost = location.host;
          }

          // 2.首先判断是否为jsonp
          if (dateType == "jsonp") {
              // 2.1 是否同源
              if (
                  location.protocol == targetProtocol &&
                  location.host == targetHost
              ) {
                  // 同源
              } else {
                  // 2.2 不同源 跨域
                  // (1) 随机生成一个callback
                  let callback =
                      "jQuery" + Math.floor(Math.random() * 1000000);
                  // (1.1) 并创建一个名为callback值得函数
                  window[callback] = options.success; //请求成功之后得回调
                  console.log(window[callback]);

                  // (2) 生成script标签
                  let script = document.createElement("script");
                  // (3) 请求URL为src的属性 同时拼接callback参数
                  if (/\?/.test(url)) {
                      // 一开始存在参数
                      script.src = url + "&callback=" + callback;
                  } else {
                      // 一开始不存在参数
                      script.src = url + "?callback=" + callback;
                  }
                  // (4) 添加script标签在head中
                  document.head.appendChild(script);
              }
          }
      },
  };
  $.ajax({
      url: "http://developer.duyiedu.com/edu/testJsonp?",
      type: "get",
      dateType: "jsonp",
      // 用户自定义方法处理返回数据
      success: function (date) {
          console.log(date);
      },
  });