ajax 跨域请求

 

jQuery中ajax处理跨域的两种解决方案

 

一、jsonp

JSONP（JSON with Padding）是JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP的原理是动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

实践应用 -- ajax请求代码：

上述代码，发出的请求地址大概为：http://119.23.129.15:8112/api/basic/AuditStatus?jsonpCallback=jquery111111（jquery111111为随机生成的字符串，不用关心其值）

ajax发送请求时，须要在客户端注册一个callback（如：jsonpCallback）, 而后把callback的名字（如：jquery111111）传给服务器。

注意：服务端获得callback的数值后，要用jquery111111(...)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。

也就是说，接口返回的数据，须要拼接上callback的值，上面代码，经过jsonp设置参数名，设置了jsonpCallback

那么，接口须要接收jsonpCallback的值，并拼接上返回的数据，格式： jsonpCallback+ "("+data+")"

 

二、CORS（跨域资源共享）

这个方案实现起来很是简单，只需由服务器发送一个响应标头便可

response.setHeader("Access-Control-Allow-Origin","*") 

“*”号表示容许任何域向咱们的服务端提交请求

也能够设置指定容许访问的域名，如域名 http://www.test2.com 

response.setHeader("Access-Control-Allow-Origin","http://www.test2.com") 

 

如图，在服务端设置了一个响应标头容许全部资源访问以后，8968端口也能访问到8112端口的接口了。

 

对比JSONP与CORS

CORS与JSONP相比，更为先进、方便和可靠。

JSONP只能实现GET请求，而CORS支持全部类型的HTTP请求。

使用CORS，开发者能够使用普通的XMLHttpRequest发起请求和得到数据，比起JSONP有更好的错误处理。

CORS浏览器支持状况：