Skip to content

CORS

Jump to bottom
JoyChou edited this page Nov 25, 2018 · 10 revisions

前端发起AJAX请求都会受到同源策略（CORS）的限制。发起AJAX请求的方法：

  • XMLHttpRequest
  • JQuery的$.ajax
  • Fetch

前端在发起AJAX请求时，同域或者直接访问的情况下，因为没有跨域的需求，所以Request的Header中的Origin为空。此时，如果后端代码是response.setHeader("Access-Control-Allow-Origin", origin)，那么Response的header中不会出现Access-Control-Allow-Origin，因为Origin为空。

POC

<html>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
  </script>
  <body>
    <script>
      $.ajax({
        type: "GET",
        url: "http://localhost:8080/cors/vuls2",
        success: function(data) {
          alert(data);
        },
        error: function(msg) {
          alert(msg)
        }
      });
    </script>
  </body>

</html>

说明

  • 同域的请求会自动带上Cookie。
  • Origin为空，表示是同域或直接访问，视为安全情况。做安全限制需要注意空Origin，不要一起限制了。
  • 后端设置Access-Control-Allow-Origin为*的情况下，跨域的时候前端如果设置withCredentials为true会异常。The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
  • 后端设置Access-Control-Allow-Credentials为true，表示跨域请求后端接口时，允许带上Cookie。此时，前端必须设置withCredentials为true。同时，由于Cookie本身也受同源策略限制，所以Cookie要实现跨域跨域还需要满足
    • 相同的一级域名下（比如joychou.org）
    • Cookie的domain设置为.joychou.org
    • 不能实现a.com带上aaa=bbb的Cookie，跨域请求b.com，b.com的请求中头的Cookie不可能存在aaa=bbb

参考

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

Clone this wiki locally