跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了。
比如,一个带有其他域名的 src 的 <img> 标签,以及页面中引入的其他第三方的 CSS 样式等。
对于 img 以及 CSS 而言,跨域请求本身并没有更多的安全问题,因为这些请求都属于只读请求,并不会对源资源造成副作用。
而如果跨域请求是从脚本里面发出去的,由于脚本具有高度灵活性,浏览器出于安全考虑,会根据同源策略来限制它的功能,使得正常情况下,脚本只能请求同源的资源。
如果页面确实需要通过脚本请求其他网站的资源,那么就应当在跨域资源共享的机制下工作。
同源策略
对于两个页面(资源)而言,只要他们满足以下三个条件则称他们符合同源策略:
-
协议相同
-
端口相同
-
域名相同
可以通过JS 设置 document.domain 来通过同源策略。如:
在子域 http://a.example.com/test.html 的页面中,通过 JS 设置 document.domain='example.com' ,则当前页面与 http://example.com/page.html 符合同源策略。
简单的说,对于页面 http://www.example.com/page1.html 来说,以下页面与它都不符合同源策略,脚本无法直接请求这些资源:
-
https://www.example.com/page1.html : 协议不同
-
http://www.example.com:81/page1.html : 端口不同
-
http://another.example.com/page1.html : 域名不同
如果用的是jquery的话 可以用jsonp解决跨域
$.ajax({ url:"http://crossdomain.com/services.php", dataType:'jsonp', data:'', jsonp:'callback', success:function(result) { for(var i in result) { alert(i+":"+result[i]);//循环输出 } } });
$.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) { alert(i+":"+json[i]); } }, 'jsonp');
Jsonp原理