前端js跨域请求访问解决方案

什么是不同域？

什么是跨域？

Web 浏览器具有一个称为相同站点源策略的安全策略，此策略可阻止网页访问另一个域中的数据。 网站通常会让其服务器在后端请求其他站点服务器中的内容，由此避开浏览器中的检查，从而绕开此策略。
注意好多文章写的是“JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。” 这根本就是错误的，大家依然在抄来抄去，即使是一些所谓专业前端网站也是直接抄上。

什么是前端跨域？

前端跨域请求访问解决方案有哪些？

同源策略跨域（document.domain）

利用iframe和location.hash

使用此方法来完全跨域试试：比如：1.com下的1.com/1.html和2.com域下的2.com/2.html来通讯，来操作一下，
在1.com/1.html加入一个iframe，src="2.com/2.html"，这样1.com/1.html就可以获取到iframe src上的hash值。
但是浏览器是不允许跨域修改iframe内的跨域域名通过parent.location.hash的值，
所以2.com/2.html并不能通过parent.location.hash修改hash值，这样2.com/2.html有变化是不能通过hash值来通知1.com/1.html，
于是我们要在2.com/2.html里面再加一个iframe src="1.com/2.html"，然后让src="1.com/2.html"通过parent.parent.location.hash来修改1.com/1.html那个iframe的hash。
1.com/1.html想知道hash是不是有变化还要加个定时检测，
真的很绕很麻烦，我们还是看看下面还有没有更好的办法吧。

window.name实现的跨域数据传输

JSONP跨域（支持get不支持post）

浏览器虽然不让跨域共享数据，但是不限制js资源跨域共享，跨域外链的js是可以执行的，同时也可以获取当前页面上已经。
先看一段代码：

a.com/1.html有如下js：
<script>
//回调函数
function callback(data) {
    alert(data.message);
}
</script>
<script src="http://a.com/test.js"></script>

a.com/test.js中执行 callback({message:"success"}); a.com/1.html中的函数callback(data)将会被执行，
于是，如果服务端返回一个类似这样的内容，也是可以出现同样的效果。
实际应用：

jqueryz中的$.getJSON
<div id="images"></div>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});
注意jsoncallback=?，服务端返回的函数名就是获取这个参数的值，当然参数名是前后端商定的，函数名就是他传啥就返回啥，因为你的api给别人用还要定死人家的执行的函数名应该是额昂人比较蛋疼的

以php大概演示如下：
<?php
$jsondata = json_encode(array('a' =>'b'));
$callback = $_REQUEST['jsoncallback'];
echo "(function(){var _jsonData=$jsondata; $callback(_jsonData);})()";

使用HTML5 postMessage

CORS(Cross-Origin-Resource-Shares)跨域资源共享（服务端方法）