什么是跨域？跨域工作原理及实现教程

什么是跨域?

当一个资源从与该资源本身所在的服务器不同的域或端口或协议请求另一个资源时，资源会发起一个跨域 HTTP 请求

域名、端口号和协议三者有任意一个与当前资源的不同，即为跨域。

同源策略

是由NetSpace提出的一个著名的安全策略，现在所有支持JavaScript浏览器都会使用该策略。

在现代浏览器中，为了安全，http请求被严格限制在同一域名下。XMLHttpRequest就遵循同源策略。

但是，静态资源时不受限制的，可以加载任意URL地址下的脚本、样式、图片等。

jsonp

jsonp(json with padding),打包在函数调用中的JSON。

工作原理

jsonp的工作原理是静态资源没有跨域限制，当需要跨域时创建script标签，其src属性设置为第三方地址，

<script src="https://www.aaa.com?callback=xxx></script>  

并提供一个回调函数(函数名可约定)来接收返回的数据，第三方响应后将json格式的数据包装在约定好的回调函数中，返回给请求方。

callback({"name":"baibai","height":"178"})  

实现

javascript

<script>  
    var script=document.createElement("script");  
    script.src="https://www.littlebai.com/api?callback=jianglittlebai";  
    document.body.appendChild(script);  
    function jianglittlebai(result){  
           
    }  
</script>  

jQuery

<script>  
  $.ajax({  
  type:"get",  
  dataType:"jsonp",  
  data:"",  
  jsonp:"jianglittlebai",  
  success:function(result){  
  },  
  error:function(){  
  }  
  })  
</script>

优劣

优点是：实现简单、浏览器兼容性很好(在很早的浏览器中都可以运行)。

缺点是：仅支持get类型的请求。

CORS

CORS:跨域资源共享

postMessage()