首页 > 上网技巧 > 电脑小技巧 > 跨域解决办法Jsonp & Cors

跨域解决办法Jsonp & Cors

时间:2018-04-23 09:25 作者:QQ地带 我要评论

跨域原因:
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的网站请求数据。
 
 

标签: JSONP
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告