1.什么是跨域?
所谓跨域就是浏览器从一个域名的网页去请求另一个不同域名的资源
2.为什么存在跨域问题?
因为浏览器存在同源策略问题,主要是为了防御危险,是浏览器对js的安全限制,只要是协议,域名,端口有任何一个不同,就会形成跨域。
3.js跨域方法
这里说的跨域是指通过js在不同的域名之间进行数据传输或者通信,如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。
-
jsonp
jsonp是日常开发中常用的跨域方法,它主要是通过script标签无同源限制的特点,获取到需要的数据之后自动执行回调方法。
原理:我们将想要跨域的地址放到script标签中,然后发送一个回调函数,后台返回回调函数到前端,这样就可以实现跨域了。从上可以看出,jsonp需要后端进行配合,我们在像服务器端发送地址时,url中会带一个参数(callback)参数,服务器端获得这个参数,就会以它为一个方法名,把数据放到这个方法里。
也就是说:用js动态加载一个script文件,同时定义一个callback函数给script执行。
缺点:只能支持get请求
jQuery封装jsonp用法
<script type="text/javascript">
$.getJSON('xxxxx?callback=?',function(jsondata){
//处理获得的json数据
});
</script>
- CORS(h5支持)
概念: CORS(Cross-Origin Resource Sharing)跨域资源共享,主要思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定响应是成功还是失败,它允许了浏览器向跨源服务器发送请求,从而克服了同源的限制。
cors通信和ajax通信代码是一样的,关键在于服务器,只要服务器端实现了cors接口,就可以跨域了。
服务器端主要是设置“Access-Control-Allow-Origin”,这时候如果浏览器检测到相应的设置,ajax就可以进行跨域了。
只需要在后台中加上响应头来允许域请求!在被请求的Response header中加入以下设置,就可以实现跨域访问了!
//指定允许其他域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type'
例如在PHP的header()中设置header(Access-Control-Allow-Origin:* ”)
如果携带cookie,要在ajax里设置xhr.withCredentials = true,表示携带cookie
注意:允许携带cookie时,必须制定域名,不能用*,
我这里就主要总结了jsonp和cors的跨域方法,写的不是很详细,最后推荐两篇文章,写的很详细,可以参考咯~~~
不要再问我跨域的问题了
前端常见跨域解决方案(全)