Ajax之跨域
2018-11-29 本文已影响4人
Frankeen
跨域概念
同源策略是浏览器上为安全性考虑实施的非常重要的安全机制。Ajax默认是能获取同源的数据,对于非同源的数据Ajax默认是不能获取到的。什么叫同源呢,同源就是两个相互交互的地址的协议,端口,域名三者都一样;比如有一个页面,它的地址为http://www.ko.com/dir/page.html这个网址,在这个网址中要去获取服务器的数据,获取数据的地址如下:
#URL 结果 原因
https://www.ko.com/dir/page.html 不同源 协议不同,一个是http,一个是http
http://www.ko1.com/dir/page.html 不同源 域名不同,一个是ko,一个是ko1
http://www.ko.com:82/dir/page.html 不同源 端口不同,一个是80,一个是82
http://www.ko.com/dir1/page.html 同源
如果获取非同源数据,就会报以下异常:
Failed to load https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E8%B1%86: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
如果我们想要获取跨域的数据,我们该怎么办呢?
可以通过script的src方式,也可以使用ajax设置数据类型为jsonp
#方式一
<script type='text/javascript'>
function cb(data){
console.log(data);
}
</script>
<script type='text/javascript' src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=dd&callback=cb"></script>
#方式二
$.ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data:{wd:"豆"},
success:function(data){
console.log(data);
},
dataType:"jsonp",
jsonp:"cb"
})