跨域解决办法Jsonp & Cors

跨域缘由：

web中存在跨域是因为浏览器采用同源安全策略，形成的跨域问题。

同源策略 :

是指在不一样的请求（http/https)、域名 （www.baidu.com/www.alibaba.com）、端口（80/8080）

解决办法

JSONP:

json实现原理是采用相似图片src跨域请求资源的方式完成数据的请求，经过js动态生成的

< script src="js-path.js?callBack=function(){alert(args)}" /> 
复制代码

编程技巧实现，非官方协议。服务端接收到请求后，会把参数回传回来，便可当即执行该js 的callBack回调函数。Jquery也是按照该原理实现了封装，所以有了jquery 版本的ajax jsonp请求。

Jsonp&Json区别

Jsonp和json没有直接的联系，jsonp是一种非官方协议，json是一种方便传递的文本数据格式。

CORS:

CORS须要浏览器和服务器同时支持。目前，全部浏览器都支持该功能，IE浏览器不能低于IE10。 整个CORS通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。所以，实现CORS通讯的关键是服务器。只要服务器实现了CORS接口，就能够跨源通讯，cors分为简单请求和非简单请求。

简单请求

（1) 请求方法是如下三种方法之一： HEAD GET POST （2）HTTP的头信息不超出如下几种字段： Accept Accept-Language Content-Language Last-Event-ID Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain 凡是不一样时知足上面两个条件，就属于非简单请求。 浏览器发现此次跨源AJAX请求是简单请求，就会自动在头信息之中，添加一个Origin字段， 上面的头信息中，Origin字段用来讲明，本次请求来自哪一个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否赞成此次请求。若是Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获（这种错误没法经过状态码识别，由于HTTP回应的状态码有多是200）。若是Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin:容许的域名
Access-Control-Allow-Credentials:是否包括Cookie信息/boolean类型 
Access-Control-Expose-Headers: 可选字段值
Content-Type: text/html; charset=utf-8
复制代码

非简单请求

非简单请求是那种对服务器有特殊要求的请求，好比请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通讯以前，增长一次HTTP查询请求，称为"预检"请求（preflight）。"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。 若是浏览器否认了"预检"请求，会返回一个正常的HTTP回应，可是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不一样意预检请求，所以触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。 一旦服务器经过了"预检"请求，之后每次浏览器正常的CORS请求，就都跟简单请求同样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

CORS&JSONP

同：CORS与JSONP都是为了跨域资源请求，可是CORS比JSONP更强大。 区别：JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。