1、什么是跨域問(wèn)題
在頁(yè)面中使用js訪(fǎng)問(wèn)其他網(wǎng)站的數據時(shí)，就會(huì )出現跨域問(wèn)題，比如在網(wǎng)站中使用ajax請求其他網(wǎng)站的天氣、快遞或者其他數據接口時(shí)，以及hybrid app中請求數據，瀏覽器會(huì )提 示一下錯誤：
XMLHttpRequest cannot load http://你請求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://當前頁(yè)的域名' is therefore not allowed access.
2、為什么會(huì )出現跨域問(wèn)題
因為瀏覽器收到同源策略的限制，當前域名的js只能讀取同域下的窗口屬性。
同源策略： 不同的域名, 不同端口, 不同的協(xié)議不允許共享資源的， 保障瀏覽器安全。
同源策略時(shí)針對瀏覽器設置的門(mén)檻。如果繞過(guò)瀏覽就能實(shí)現跨域，所以說(shuō)早期的跨域都是打著(zhù)安全路數的擦邊球，都可以認為是 hack 處理。
3、現在總結一下解決跨域的幾種方法
jsonp 跨域方法
我們提供一個(gè) script 標簽. 請求頁(yè)面中的數據, 同時(shí)傳入一個(gè)回調函數的名字. 服務(wù)器端得到名字后, 拼接函數執行格式的字符串. 發(fā)送回瀏覽器. script 在下載代碼以后并執行, 執行的就是這個(gè)函數調用形式的字符串, 因此就將本地函數調用了.同時(shí)拿到了從服務(wù)器端得到的數據。
window.name
window對象的name屬性是一個(gè)很特別的屬性，當該window的location變化，然后重新加載，它的name屬性可以依然保持不變。那么我們可以在頁(yè)面A中用iframe加載其他域的頁(yè)面B，而頁(yè)面B中用JavaScript把需要傳遞的數據賦值給 window.name，iframe加載完成之后，頁(yè)面A修改iframe的地址，將其變成同域的一個(gè)地址，然后就可以讀出window.name的值了。這個(gè)方式非常適合單向的數據請求，而且協(xié)議簡(jiǎn)單、安全。不會(huì )像JSONP那樣不做限制地執行外部腳本。
document.domain
通過(guò)修改document的domain屬性，我們可以在域和子域或者不同的子域之間通信。同域策略認為域和子域隸屬于不同的域，比如 www.a.com和sub.a.com是不同的域，這時(shí)，我們無(wú)法在www.a.com下的頁(yè)面中調用sub.a.com中定義的JavaScript 方法。但是當我們把它們document的domain屬性都修改為a.com，瀏覽器就會(huì )認為它們處于同一個(gè)域下，那么我們就可以互相調用對方的 method來(lái)通信了。
window.postMessage
window.postMessage是HTML5定義的一個(gè)很新的方法，這個(gè)方法可以很方便地跨window通信。由于它是一個(gè)很新的方法，所以在很舊和比較舊的瀏覽器中都無(wú)法使用。
借助于服務(wù)器代碼來(lái)跨域（正向代理、反向代理）
正向代理： 我借助與我的服務(wù)器, 像數據服務(wù)器發(fā)送數據, 我的服務(wù)器只需要向數據服務(wù)器發(fā)送get請求即可
反向代理： 與正向代理類(lèi)似, 但是不借助于腳本, 而是直接使用 服務(wù)器映射 url.
例如： 我們的 url 是 http://studyit.com
數據服務(wù)器的 url 是 http://api.botue.com/login
在 apache 配置一個(gè) url 的代理映射
理論上使用 url: http://studyit.com/api 是在網(wǎng)站根目錄下找 api 文件夾
但是現在 apache 提供一個(gè)映射的功能, 將 /api 映射到 http://api.botue.com
有了這個(gè)映射, 那么 訪(fǎng)問(wèn) http://api.botue.com/login 就可以利用 /api/login來(lái)訪(fǎng)問(wèn)了.
反向代理的好處:
不僅實(shí)現了跨域( 服務(wù)器幫我們實(shí)現的 ), 而且訪(fǎng)問(wèn)數據的時(shí)候就好像在訪(fǎng)問(wèn)本地服務(wù)器一樣.如此, 諸如 cookie 等數據就可以直接獲得了.
怎么使用 反向代理( 不同的服務(wù)器的使用方法不一樣 )
1) 找到 httpd.conf 配置文件, 找到里面的 porxy 開(kāi)頭的兩個(gè)模塊加載項. 去掉其注釋.
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
2) 找到虛擬主機的配置文件. 需要誰(shuí)來(lái)做反向代理 就修改誰(shuí)的配置文件，在虛擬主機的設置中( 就是那一對尖括號中 )添加兩個(gè)選項
ProxyRequests Off
ProxyPass /abc http://test2.com
3) 重啟服務(wù)器
CORS 跨域
CORS 是在 es5 之后提出的跨域方案. 只需要在服務(wù)器配置一個(gè)跨域響應頭接口
與jsonp相比的優(yōu)點(diǎn)：
1、 JSONP只能實(shí)現GET請求，而CORS支持所有類(lèi)型的HTTP請求。
2、 使用CORS，開(kāi)發(fā)者可以使用普通的XMLHttpRequest發(fā)起請求和獲得數據，比起JSONP有更好的錯誤處理。
3、 JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數現代瀏覽器都已經(jīng)支持了CORS。
代碼如下：
客戶(hù)端：
服務(wù)器端：
以上這篇完美解決瀏覽器跨域的幾種方法(匯總)就是小編分享給大家的全部?jì)热萘?，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
聯(lián)系客服
