You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
JSONP(JSON with padding)的原理是script标签不受同源安全策略限制,它可以向别的域发送get请求。
functionhandleResponse(data){console.log('The response data is:'+data);}//动态添加script标签varscript=document.createElement('script');script.src='http://www.baidu.com/json?callback=handleResponse';script.setAttribute('type','text/javascript');document.body.appendChild(script);
跨域问题
浏览器的安全基石是“同源政策”,所谓同源是指协议相同,域名相同,端口相同,只要其中有一个不同,则称为不同源。不同源的网站之间不能够相互请求数据,以确保用户数据的安全性。
但有的时候,一个网站不得不请求别的域上面的数据,这个过程就称为跨域。
跨域的实现方法有以下几种:
(1)JSONP
JSONP(JSON with padding)的原理是script标签不受同源安全策略限制,它可以向别的域发送get请求。
后台收到get请求后,根据callback参数生成相应的JSONP数据 handleResponse({'data': serverdata}),这段数据返回前端就会被当作js代码执行,触发回调函数。
jQuery和JSONP
(2)CORS
CORS是一个W3C标准,全称为跨域资源共享(cross-origin resource sharing),它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
整个CORS通信过程都由浏览器自动完成,用户不需要参与,对于前端开发者来说,同源ajax和CORS的代码完全相同,因此,实现CORS的关键在于服务器是否提供CORS接口。
简单请求例子:
若服务器允许来自http://api.bob.com的跨域请求,则会进行如下响应:
若不允许,则不会设置Access-Control-Allow-Origin字段,如果服务器将此字段设为*,则表示服务器接受所有域的跨域请求。
Access-Control-Allow-Credentials: true 则表明服务器接受cookie,同时开发者应在AJAX打开withCredentials属性,以允许浏览器发送cookie:
跨域资源共享 CORS 详解
(3)iframe + HTML5 postMessage
即不同window间通过HTML5的API postMessage进行跨域通信,其格式为:
示例:
(4)iframe + window.name
原理: windoe.name 的值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)
a.com/1.html
other-origin/data.html
(5)WebSocket
WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。
The text was updated successfully, but these errors were encountered: