【综合】JS跨域方案JSONP与CORS跨域

缘由：

　　因为浏览器的同源策略，即是浏览器之间要隔离不同域的内容，禁止互相操作，提高安全性。

 

为何要跨域:

　　有时候你想通过自己的网站去获取另一个自己的网站的一些资料信息，但是由于两者域名不同，所以就被同源策略隔离了，那么这个时候就需要了解一下浏览器的跨域问题。

 

跨域的两种方案对比：

　　JSONP与CORS的使用目的相同，并且都需要服务端和客户端同时支持，虽然功能上讲CORS更为强大，但是需要根据应用场景选择使用哪一个。

1、JSONP（json with padding 填充式json），利用了使用src引用静态资源时不受跨域限制的机制。主要在客户端搞一个回调做一些数据接收与操作的处理，并把这个回调函数名告知服务端，而服务端需要做的是按照javascript的语法把数据放到约定好的回调函数之中即可。jQuery很早之前就已经吧JSONP语法糖化了，使用起来会更加方便。

2、CORS（Cross-origin resource sharing 跨域资源共享），依附于AJAX，通过添加HTTP Hearder部分字段请求与获取有权限访问的资源。CORS对开发者是透明的，因为浏览器会自动根据请求的情况（简单和复杂）做出不同的处理。CORS的关键是服务端的配置支持。由于CORS是W3C中一项较“新”的方案，以至于各大网页解析引擎还没有对其进行严格规格的实现，所以不同引擎下可能会有一些不一致。【兼容性较差】在前文看到同源策略的时候，不知道大家有没有想过，难道就不能让两个跨域的站点写一个秘密的协议，达成一种交易从而使得两者可以进行跨域操作获取数据之类的吗？嗯，我个人觉得cors做的就是这件事。要想实现cors跨域，需要做的就是两件事，一个是我们的浏览器要支持cors跨域这一操作（主流谷歌和火狐均支持，ie版本要高于ie10才行），另外，我们的服务器端必须要设置好Access-Control-Allow-Origin从而支持跨域操作。

 

优缺点对比：

　　1、jsonp的优点是兼容所有的浏览器，无论是主流的还是以前的。而它的缺点则是由于jsonp发起的请求是get方式的，即参数是填充在请求地址上，所以这种方式发送的数据有限制。虽然目前主流浏览器支持CORS，但IE10以下不支持CORS。

　　2、JSONP只能用于获取资源（即只读，类似于GET请求）；CORS支持所有类型的HTTP请求，功能完善。（这点JSONP被玩虐，但大部分情况下GET已经能满足需求了）cors相对于jsonp而言的好处就是支持所有的请求方式，不止是get请求，还支持post,put请求等等，而它的缺点就很明显，无法兼容所有的浏览器，对于要兼容到老式浏览器而言，还是使用jsonp好点。

 

参考原文：

https://www.zhihu.com/question/41992168/answer/217903179

https://www.cnblogs.com/jelly7723/p/5494330.html