17
2020
02

跨域解决方案有哪些?

1:jsonp 只能解决get跨域(问的最多)


原理:动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。


步骤:


去创建一个script标签

script的src属性设置接口地址

接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

通过定义函数名去接收后台返回数据

//去创建一个script标签

var  script = document.createElement("script");

//script的src属性设置接口地址 并带一个callback回调函数名称

script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";

//插入到页面

document.head.appendChild(script);

//通过定义函数名去接收后台返回数据

function jsonpCallback(data){

    //注意  jsonp返回的数据是json对象可以直接使用

    //ajax  取得数据是json字符串需要转换成json对象才可以使用。

}


2:CORS:跨域资源共享


原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求


限制:浏览器需要支持HTML5,可以支持POST,PUT等方法兼容ie9以上


需要后台设置

Access-Control-Allow-Origin: *              //允许所有域名访问,或者

Access-Control-Allow-Origin: http://a.com   //只允许所有域名访问

3:设置 document.domain


原理:相同主域名不同子域名下的页面,可以设置document.domain让它们同域


限制:同域document提供的是页面间的互操作,需要载入iframe页面


// URL http://a.com/foo

var ifr = document.createElement('iframe');

ifr.src = 'http://b.a.com/bar'; 

ifr.onload = function(){

    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;

    ifrdoc.getElementsById("foo").innerHTML);

};


ifr.style.display = 'none';

document.body.appendChild(ifr);

4:用Apache做转发(逆向代理),让跨域变成同域

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。