1、什么是跨域問題
在頁面中使用js訪問其他網站的數據時,就會出現跨域問題,比如在網站中使用ajax請求其他網站的天氣、快遞或者其他數據接口時,以及hybrid app中請求數據,瀏覽器會提 示一下錯誤:
XMLHttpRequest cannot load http://你請求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://當前頁的域名' is therefore not allowed access.
2、為什么會出現跨域問題
因為瀏覽器收到同源策略的限制,當前域名的js只能讀取同域下的窗口屬性。
同源策略: 不同的域名, 不同端口, 不同的協議不允許共享資源的, 保障瀏覽器安全。
同源策略時針對瀏覽器設置的門檻。如果繞過瀏覽就能實現跨域,所以說早期的跨域都是打著安全路數的擦邊球,都可以認為是 hack 處理。
3、現在總結一下解決跨域的幾種方法
jsonp 跨域方法
我們提供一個 script 標簽. 請求頁面中的數據, 同時傳入一個回調函數的名字. 服務器端得到名字后, 拼接函數執(zhí)行格式的字符串. 發(fā)送回瀏覽器. script 在下載代碼以后并執(zhí)行, 執(zhí)行的就是這個函數調用形式的字符串, 因此就將本地函數調用了.同時拿到了從服務器端得到的數據。
window.name
window對象的name屬性是一個很特別的屬性,當該window的location變化,然后重新加載,它的name屬性可以依然保持不變。那么我們可以在頁面A中用iframe加載其他域的頁面B,而頁面B中用JavaScript把需要傳遞的數據賦值給 window.name,iframe加載完成之后,頁面A修改iframe的地址,將其變成同域的一個地址,然后就可以讀出window.name的值了。這個方式非常適合單向的數據請求,而且協議簡單、安全。不會像JSONP那樣不做限制地執(zhí)行外部腳本。
document.domain
通過修改document的domain屬性,我們可以在域和子域或者不同的子域之間通信。同域策略認為域和子域隸屬于不同的域,比如 www.a.com和sub.a.com是不同的域,這時,我們無法在www.a.com下的頁面中調用sub.a.com中定義的JavaScript 方法。但是當我們把它們document的domain屬性都修改為a.com,瀏覽器就會認為它們處于同一個域下,那么我們就可以互相調用對方的 method來通信了。
window.postMessage
window.postMessage是HTML5定義的一個很新的方法,這個方法可以很方便地跨window通信。由于它是一個很新的方法,所以在很舊和比較舊的瀏覽器中都無法使用。
借助于服務器代碼來跨域(正向代理、反向代理)
正向代理: 我借助與我的服務器, 像數據服務器發(fā)送數據, 我的服務器只需要向數據服務器發(fā)送get請求即可
反向代理: 與正向代理類似, 但是不借助于腳本, 而是直接使用 服務器映射 url.
新聞熱點
疑難解答
圖片精選