1,我们先来说一下什么是跨域
a.浏览器有同源策略,不允许ajax访问其他域接口
b.跨域条件:协议、域名、端口有一个不同就算跨域
例如:
我的网站:http://www.my.com/page.html
你的网站:http://www.your.com/page.html
当我想要在我的网站下通过ajax访问你的网站的接口是不可以的,因为域名不一样,这就是跨越;
但是呢有三个标签是允许跨域加载资源的:
a.<img src=xxx>(防盗链不说,浏览器是不会限制的);
b.<link href=xxx>你可以加载别的网站的css;
c.<script src=xxx>可以加载其他网站的js
这三个标签的场景
a.<img>用来打点统计,统计网站可能是其他域
b. <link><script>可以用于cdn,cdn也是其他域;
c.<script>可以用于jsonp,这也是我们接下来实现跨域的条件
跨域的注意事项:
a.所有的跨域请求都要经过信息提供方允许
b.如果未经允许就获取到信息,那是浏览器同源策略出现漏洞
jsonp实现原理:
a.服务器可以根据请求动态生成一个文件返回;
例如你要访问百度下面的一个接口,这个接口是http://www.baidu.com/api.js,接口返回的内容是callback({x:1,y:2}),相当于返回一个函数,参数就是返回给你的内容;
这时候我们的实现形式就应该是:首先定义一个函数callback;然后请求接口,接口返回执行callback,这时我们就得到了返回的数据,如下:
<script>
window.callback=function(data){
console.log(data)
}
</script>
<script src="http://www.baidu.com"></script>
另一个方法是服务器端设置http header;
这里只是原理的分析,后续我们会进行实践的操作