跨域请求的几种解决思路汇总

今天学习了下js的跨域请求，根据曾经用到过的jsonp跨域请求方式，将前辈们用到的以及学习到的原理、思路记录下来，仅供参考。

1、通过script标签的方式指定src来实现跨域请求

script标签的src没有指定域名的请求限制，因此可以使用这种方式解决跨域问题。

假设需要跨域请求www.xxx.com/a，该请求会返回类似callback(json) 的string。

可以调用下面的方法getScript("www.xxx.com/a")：

function getScript(url){
    var script = document.createElement("script");
    script.type="text/javascript";
    script.src = url;

    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
}

getScript方法会动态创建一个script标签，将传入的url作为script的src。由于会返回callback(json).因此需要有个callback的js函数获取数据：

function callback(data){
    //TODO.....
}

在js函数callback里就可以处理跨域请求的返回数据了。

 

2、通过jquery的getScript方法

$.getScript接收两个参数，一个是url，一个是回调函数。

jquery的源码：

getScript: function( url, callback ) {
        return jQuery.get( url, undefined, callback, "script" );
    }

跨域请求则需进行如下调用：

$.getScript("www.xxx.com/a",function(data){
    //TODO...
});

 

3、通过jquery的getJSON方法(即jsonp)

跨域请求则需进行如下调用：

$.getJSON("www.xxx.com/a?callback=?",function(data){
    //TODO...
});

jsonp跨域请求的原理

 

 

4、通过代理进行跨域请求（对静态页面设置domain）

这种方式的思路是：在服务端有个静态页面，对页面设置域名与需请求的域名相同，如：

<script type="text/javascript">

document.domain="xxx.com";  //一级域名

</script>

然后可以在该页面里进行二级域名的请求，得到的数据就会在这个页面里； 接着可以在需要数据的地方通过load加载这个静态页面，达到跨域请求，这种方式由于是将数据请求到静态页面，因此称之为代理。

 

如果不想直接在静态页面里请求，也可以通过在需要进行跨域的地方创建一个iframe，通过iframe引入静态页面，然后动态的在iframe里进行ajax请求，同样也能达到效果。