最近在做某平台的对接，需要做一个canvasURL的东西，其实就是一个html（后面简称A页面），这个A页面并不是直接被访问的，而是在访问B页面的时候会嵌入到页面中执行。 问题来了，B页面在X域，A页面在Y域，然后在A页面中还要访问Z域的C接口。 这里涉及到一个跨域访问的问题。
要知道什么是是跨域访问，得先知道什么是同源策略。所谓同源策略，简单的说就是基于安全考虑，当前域不能访问其他域的东西。 什么算同源，什么不算同源呢？例：
URL1URL2是否同源说明http://www.a.comhttps://www.a.com不同源协议不同http://www.a.comhttp://www.b.com不同源域名不同http://www.a.com:8080http://www.a.com:8888不同源端口不同http://www.a.com/x.jshttp://www.a.com/y.js同源协议、域名、端口相同http://www.a.com/test1/x.jshttp://www.a.com/test2/y.js同源同一域名下的不同文件夹在同源策略下，在A服务器下的页面是无法获取到B服务器的数据的。
现在，我有两台电脑，这两台电脑所在的域不同。 我在A电脑上搭建一个简单的Web服务器，代码很简单，一个test.js，里面的内容如下：
快速搭建Web服务器可以使用python，比如我用的是python的SimpleHTTPServer。 具体做法：在某个目录放你的html或js，然后在改目录下执行：py -2 -m SimpleHTTPServer 8304， 具体端口自己定。这样就运行起一个简单的web服务器了 效果如下
现在我在B电脑写个html，在js中去访问这个A电脑的Web服务器。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://minigame.qq.com/plat/social_hall/js/jquery.pm.js"></script> </head> <body> </body> <script type="text/javascript"> $.ajax({ url: "http://192.168.0.52:8304/test.js", data: { }, type: "GET", crossDomain: true, success: function(_resp, status) { console.log(_resp); }, error: function(xhr, status, error) { console.log(error); } }); </script>用浏览器运行B电脑的这个html 我们会看到报错了，跨域访问了。
jsonp是json with padding（填充式 json或参数式 json）的简写。 jsonp实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src不受同源策略约束来跨域获取数据。 jsonp由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 json数据。
B电脑的html修改一下，加上三个参数
jsonpCallback:"jsonpCallbackFun", jsonp:"callback", dataType: 'jsonp',例：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://minigame.qq.com/plat/social_hall/js/jquery.pm.js"></script> <script type="text/javascript" src="http://minigame.qq.com/plat/social_hall/app_frame/qqgamelib.js?rev=8581"></script> </head> <body> </body> <script type="text/javascript"> $.ajax({ url: "http://192.168.0.52:8304/test.js", data: { }, type: "GET", jsonpCallback:"jsonpCallbackFun", jsonp:"callback", dataType: 'jsonp', crossDomain: true, success: function(_resp, status) { console.log(_resp); }, error: function(xhr, status, error) { console.log(error); } }); </script>A电脑的js脚本改一下， 注意，必须使用B电脑指定的jsonpCallback的函数调用，参数必须为json格式，如上的{"msg":"Hello World"}。 现在再执行B电脑的html，可以看到访问A电脑成功了，返回的数据就是一个json数据。
