JavaScript 跨域请求的4种解决方式

跨域产生的原因

假设访问的域名是：http://www.example.com.cn/

当请求的目标域名与当前域名不一致时，即构成跨域。由于浏览器的同源策略限制，正常的跨域请求通常会被拦截，导致无法直接获取数据。

window.name 跨域解决方案

1、服务器返回 window.name 数据

 
<script>window.name='{"id":"3", "name":"leisure"}';</script>
2、定义一个 iframe，并添加 onload 事件监听 <iframe id="iframe1" onload="iLoad"><iframe>
<script type="text/javascript">
var load = false;
function iLoad() {
if(load == false) {
// 同域处理，请求后会再次重新加载 iframe 以切换回同源地址
document.getElementById('iframe1').contentWindow.location = '/';
load = true;
} else {
// 获取 window.name 的内容，注意必须进行同域处理后方可访问！
var data = document.getElementById('iframe1').contentWindow.name;
alert(data); // {"id":"3", "name":"leisure"}
load = false;
} 
} 
</script>

3、定义一个 form 表单，将 form 的 target 属性设置为 iframe 的 id，然后提交该 form

 
<form action="url" method="POST" target="iframe1">
<button type="submit" value="submit" />
</form>

JSONP 跨域解决方案

服务器返回格式为 callback({"id": "3", "name": "leisure"});

 
<script type="text/javascript">
function callback(data) {
alert(data);
} 
</script>
<script type="text/javascript" src="http://www.example.com.cn/product.jsp?id=5&jsonp=callback"></script>

jQuery.getJSON 实现 JSONP

服务器返回 json 格式数据 test({"id": "3", "name": "leisure"});其中 test 函数名为 callback 参数中定义

 
$.getJSON(url + "?callback=?", data, function(data) {
} 

注意 callback=? 这个参数必须带上，jquery 会自动生成一个函数名替换这个问号！jQuery.getJSON 实际上是用了 JSONP 方式实现。

Flash 跨域策略文件配置

服务器添加 crossdomain.xml 配置文件

http://www.example.com.cn/crossdomain.xml

 
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.another.com.cn" />
</cross-domain-policy>