- 解决方式:方案一——通过JSONP跨域
方案二——CORS(Cross-Origin Resource Sharing) - 方案一——通过JSONP跨域
jsonp是JSON with padding的简写,看起来与json差不多,但是包含在函数调用中的json,利用动态script元素来使用(具有src属性的如img,iframe,srcipt都不受同源策略的影响)。该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如果使用jquery,可以在type为get的时候dataType设为jsonp,就可以了。
var jsonpsrc = 'http://127.0.0.1/jsonpdata';
$.ajax({
method: 'get',
url: jsonpsrc,
data: {
status: 200, count: 1},
dataType: 'jsonp',
jsonpCallBack: 'getdata',
success: function (res) {
console.log(res);
},
error: function (err) {
console.log(err);
},
async: true
});
})
- 方案二——CORS(Cross-Origin Resource Sharing)
function createCORSRequest(method,url){
var xhr=new XMLHttpRequest();
if("withCredentials" in xhr){
xhr.open(method,url,true);
}else if(typeof XDomainRequest != "undefined"){
//IE10之前的版本使用XDmainRequest支持CORS
xhr=new XDomainRequest();
xhr.open(method,url);
}else{
xhr=null;
}
return xhr;
}
var request=createCORSRequest("get","待访问的地址");
if(request){
request.οnlοad=function(data){
//do sth
};
request.send();
}
适用场景:
承载的信息量大,get形式搞不定,需选用post传输。CORS支持所有类型的传输。
兼容性:
移动端全面支持(除opera mini),PC上IE8+。
CORS思想:
使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。(请求和响应都不包含cookie)
当然如果设置成下面这样,所有的跨域都可以实现了,但这样毕竟太不安全。
"Access-Control-Allow-Origin:*";//
允许任何域向我们的服务器发送请求
一般情况下,浏览器发送一个额外的Origin头部(由浏览器自动生成发送)
Origin:http://localhost:8080//
本地网址
然后由服务器发送一个响应表头:Access-Control-Allow-Origin
,如果服务器接收该请求,返回值(只能是通配符或单域名。)就和请求值一样。
Access-Control-Allow-Origin:http://localhost:8080
=>CORS方案的重点其实就在于服务器端的配置。
简单请求
3-1只使用 GET, HEAD 或者 POST 请求方法。
如果使用 POST 向服务器端传送数据,则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。
3-2不会使用自定义请求头(类似于 X-Modified 这种)。
HTTP头部信息不超出以下{Accept,Accept-Language,Content-Language,Last-Event-ID,content-type(只限于上面提到的3种类型)}