js跨域的几种实现方式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011350550/article/details/79870691

通过ajax请求服务器数据，默认情况下，只能请求或访问与包含它的页面位于同一个域中的数据，这种限制来源于浏览器的跨域安全策略（同源策略）。这种安全策略可以预防某些恶意行为。但是，某些合理党的跨域资源共享是合理的，也是非常重要的。目前来说，实现跨域的主要方法有两种，Cors和Jsonp。
1、Cors（Cross Origin Resource Share，跨域资源共享）
Cors实现跨域的思想是利用自定义的Http头部，让服务器和浏览器进行沟通，最终决定发出的请求或相应是否用该成功。
服务器接收浏览器请求时，解析头部信息，可以知道该请求来源等等信息，从而决定是否响应该请求。
在返回请求时，自定义下面几个http头，可以让浏览器成功接收跨域信息。
Acess-Control-Allow-Origin：允许请求的域
Acess-Control-Allow-Methods：允许的方法
Acess-Control-Allow-Headers：允许的头部
Acess-Control-Allow-Max-Age：请求缓存的时间
例如：某个ajax请求url为http://forexample.com/getData，则在服务器设置响应头Acess-Control-Allow-Origin为http://forexample.com，浏览器就可以正常接收跨域信息。
2、Jsonp
浏览器虽有同源策略，但有一些东西是例外的，script，link标签等等，可以请求任何网页的资源，而不用担心跨域问题。利用这个特性，可以实现跨域访问。代码如下：
callback是跨域请求成功时执行的回调函数。

function handle(){
   console.log('跨域请求');
}
let script = document.createElement('script');
script.src = 'http://forexample.com/getData?callback=handle'
document.body.insertBefore(script,document.body.firstChild);

img标签也可实现跨域，原理与script标签类似，不赘述。
上面两种方法就跨域访问的常用方法，欢迎大家批评指正。