什么是跨域
- 请求协议（
http,https）不同 - 域名（
domain）不同 - 端口（
port）不同
更详细的说明可以看下表：
| URL | 说明 | 是否允许通信 |
|---|---|---|
| http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允许 |
| http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
| http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名，不同端口 | 不允许 |
| http://www.a.com/a.js https://www.a.com/b.js | 同一域名，不同协议 | 不允许 |
| http://www.a.com/a.js http://70.32.92.74/b.js | 域名和域名对应ip | 不允许 |
| http://www.a.com/a.js http://script.a.com/b.js | 主域相同，子域不同 | 不允许 |
| http://www.a.com/a.js http://a.com/b.js | 同一域名，不同二级域名（同上） | 不允许（cookie这种情况下也不允许访问） |
| http://www.cnblogs.com/a.js http://www.a.com/b.js | 不同域名 | 不允许 |
跨域解决方案之 JSONP
Jsonp （JSON with Padding） 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
由于跨域的存在，使资源交互在不同域名间变的复杂和安全。对于跨域数据传输，当数据长度较小(get的长度内)，jsonp是一种较好的解决方案。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为浏览器同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
Jsonp的原理是利用 <script> 元素的开放策略，网页可以得到从其他来源动态获取的 JSON 数据，数据被包裹在一个JavaScript 函数中。
jsonp的js端调用
主要功能：通过jsonp向服务器，调用相应接口，获应数据；根据获取数据结果做出相应回调。
<script type="text/javascript">
$(function () {
alert("start...");
$.ajax({
type: "get",
// 这个就是不同于当前域的一个URL地址
url: "http://your_site_url",
dataType: "jsonp",
//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "callback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
// jsonpcallback与上面的jsonp值一致
jsonpCallback:"success_jsonpCallback",
data: "name=admin",
success : function(json){//返回的json数据
console.log(josn.message);//回调输出
alert('success');
},
error:function(){
alert('fail');
}
});
alert("end...");
});
</script>
jsonp 服务器端 (php)
<?php
$data = ".......";
$callback = $_GET['callback'];
echo $callback.'('.json_encode($data).')';
exit;
?>
Jsonp使用注意事项
1.安全问题
JSONP可能会引起 CSRF(Cross-site request forgery 跨站请求伪造)攻击或 XSS (Cross Site Scripting 跨站脚本攻击)漏洞。
对于支持 JSONP的接口，写接口时数据可能会被篡改，读接口时数据可能会被劫持。
XSS示例：
输出 JSON 时，没有严格定义好
Content-Type（Content-Type: application/json）直接导致了一个典型的 XSS 漏洞：http://127.0.0.1/getUsers.php?callback=<script>alert(/xss/)</script>
2.传值问题
使用Jsonp进行跨域请求，只能通过GET请求传值！！！
可以从Josnp的原理来理解：
JSONP的最基本的原理是动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。
可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的，因为他的原理实际上就是 使用js的script标签 进行传参，那么必然是get方式的了，和浏览器中敲入一个url一样。
预先定义callback函数
function myfunc(data) {
console.log(data)
}
dom中插入script标签
<!-- callback参数对象对应上面callback函数名 -->
<script src="//example.com/jsonp.js?callback=myfunc"></script>
浏览器请求//example.com/jsonp.js?callback=myfunc, 得到内容
myfunc({"foo": "bar"}) //数据传入到了callback函数
本质上是通过script标签获取数据, script标签是只支持GET的。
总结
- 目前来说，数据量小的跨域传输，jsonp是一种很好的解决方案。
-
jsonp在data中可以自动识别，res.status，res.info等状态位，比较方便。 - php 端的接受代码最好不要采用
Access-Control-Allow-Origin:*风险太大。 -
Jsonp的兼容性更好，在更加古老的浏览器中都 可以运行。 -
Jsonp只支持GET请求而不支持POST等其它类型的HTTP请求 -
Jsonp只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
网友评论