新发的日常小问题——使用jsonp解决跨域访问问题
一、前言
最近在做某平台的对接，需要做一个canvasURL的东西，其实就是一个html（后面简称A页面），这个A页面并不是直接被访问的，而是在访问B页面的时候会嵌入到页面中执行。
问题来了，B页面在X域，A页面在Y域，然后在A页面中还要访问Z域的C接口。
这里涉及到一个跨域访问的问题。
二、什么是跨域访问
要知道什么是是跨域访问，得先知道什么是同源策略。所谓同源策略，简单的说就是基于安全考虑，当前域不能访问其他域的东西。
什么算同源，什么不算同源呢？例：
| URL1 | URL2 | 是否同源 | 说明 |
|---|---|---|---|
| http://www.a.com | https://www.a.com | 不同源 | 协议不同 |
| http://www.a.com | http://www.b.com | 不同源 | 域名不同 |
| http://www.a.com:8080 | http://www.a.com:8888 | 不同源 | 端口不同 |
| http://www.a.com/x.js | http://www.a.com/y.js | 同源 | 协议、域名、端口相同 |
| http://www.a.com/test1/x.js | http://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解决跨域访问问题
1、关于jsonp
jsonp是json with padding（填充式 json或参数式 json）的简写。jsonp实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src不受同源策略约束来跨域获取数据。jsonp由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 json数据。
2、具体实现
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数据。