关于跨域

159 阅读1分钟

一,什么是同源

window.origin 或 location.origin 可以得到当前的源。
源 = 协议 + 域名 +端口号
如果两个url的协议、域名、端口号完全一致,那么这两个url就是同源的。

 例如: http://www.baidu.com/ 与 http://www.baidu.com/index.html 同源
        https://baidu.com 与 https://www.baidu.com 跨域
 完全一致才算同源

二,什么是跨域

 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
 
  例如: http://www.baidu.com/ 与 http://www.baidu.com/index.html 同源
         https://baidu.com 与 https://www.baidu.com 跨域

三,JSONP 跨域

 JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
 
 核心思想:网页通过添加一个<script>元素,向服务器请求 JSON 
 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
  原生js:
  <script src="http://test.com/data.php?callback=dosomething"></script>
   // 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字
 
   // 处理服务器返回回调函数的数据
   <script type="text/javascript">
        function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }</script>

jquery ajax:

   $.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

四,CORS 跨域

CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。

1、普通跨域请求:只需服务器端设置Access-Control-Allow-Origin

2、带cookie跨域请求:前后端都需要进行设置

根据xhr.withCredentials字段判断是否带有cookie