跨域的方案

同源策略

• 协议 + 域名 + 端口 = 同源
• 非同源将限制以下行为
  • Cookie、LocalStorage和 IndexDB无法读取
  • DOM 和 JS对象无法获取
  • AJAX请求不能发送

1. JSONP 跨域

• 原理是通过<script>标签没有跨域限制。
• 后端返回数据的格式是showData(result), 因为是javacript脚本，所以会自动调用showData函数，即window.showData。
• 只支持Get请求。

  <script>
    // 向头部输入一个脚本，该脚本发起一个跨域请求
    $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
    function showData(result) {
      console.log('这就是返回的数据：', result)
    }
  </script>

  // 前端传过来的回调函数名称
  String callback = request.getParameter("callback");
  // 用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
  result = callback + "(" + result + ")";
  response.getWriter().write(result);

• jQuery式的jsonp

  $.ajax({
      url: "http://localhost:9090/student",
      type: "GET",
      dataType: "jsonp",  // 指定服务器返回的数据类型
      jsonp: "theFunction",   // 指定参数名称
      jsonpCallback: "showData",  // 指定回调函数名称
      success: function (data) {
          console.info("调用success");
      }
  });
  // 最终会拼成以下这样
  // ===> http://localhost:9090/student?theFunction=showData

2. 跨域资源共享（CORS） Cross-origin-resource-sharing

• 允许浏览器向跨源服务器，发起XMLHttpRequest请求
• 简单请求
  • 请求头部加一个字段：Origin
  • 服务器响应头部要求设置的字段
    • 必要的字段：Access-Control-Allow-Origin.允许跨域接受的域名(*若没有包含Origin里的字段的，说明请求报错)
    • 可选字段：Access-Control-Allow-Credentials.是否允许头部带Cookie值，默认不带。若要带Cookie（同时请求时withCredentials需要设置为true,且Allow-Origin不能为*号）
    • 可选字段：Access-Control-Expose-Headers,能够从响应头部获取值的相关字段。默认只能去6个（Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma），要获取其他则需要配置
• 非简单请求
  • 其他的请求方法（PUT/DELETE）
  • 预检请求（options请求方法）
  • 请求头需要设置的字段
    • Origin
    • Access-Control-Allow-Methods
    • Access-Control-Request-Headers 若请求头有这个字段，则响应头必须有Access-Control-Allow-Headers
    • Access-Control-Max-Age: 表示此次预请求的有效时间，在此期间不会再发预请求。