如何解決瀏覽器跨域問題-創(chuàng)新互聯(lián)

這篇文章主要介紹如何解決瀏覽器跨域問題，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)堅信：善待客戶，將會成為終身客戶。我們能堅持多年，是因為我們一直可值得信賴。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。10年網(wǎng)站建設(shè)經(jīng)驗創(chuàng)新互聯(lián)是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站設(shè)計制作、網(wǎng)站制作、網(wǎng)站設(shè)計、H5網(wǎng)站設(shè)計、網(wǎng)站制作、品牌網(wǎng)站制作、小程序定制開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

1、什么是跨域問題

在頁面中使用js訪問其他網(wǎng)站的數(shù)據(jù)時，就會出現(xiàn)跨域問題，比如在網(wǎng)站中使用ajax請求其他網(wǎng)站的天氣、快遞或者其他數(shù)據(jù)接口時，以及hybrid app中請求數(shù)據(jù)，瀏覽器會提 示一下錯誤：

XMLHttpRequest cannot load http://你請求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://當(dāng)前頁的域名' is therefore not allowed access.

2、為什么會出現(xiàn)跨域問題

因為瀏覽器收到同源策略的限制，當(dāng)前域名的js只能讀取同域下的窗口屬性。

同源策略： 不同的域名, 不同端口, 不同的協(xié)議不允許共享資源的， 保障瀏覽器安全。

同源策略時針對瀏覽器設(shè)置的門檻。如果繞過瀏覽就能實現(xiàn)跨域，所以說早期的跨域都是打著安全路數(shù)的擦邊球，都可以認(rèn)為是 hack 處理。

3、現(xiàn)在總結(jié)一下解決跨域的幾種方法

jsonp 跨域方法

我們提供一個 script 標(biāo)簽. 請求頁面中的數(shù)據(jù), 同時傳入一個回調(diào)函數(shù)的名字. 服務(wù)器端得到名字后, 拼接函數(shù)執(zhí)行格式的字符串. 發(fā)送回瀏覽器. script 在下載代碼以后并執(zhí)行, 執(zhí)行的就是這個函數(shù)調(diào)用形式的字符串, 因此就將本地函數(shù)調(diào)用了.同時拿到了從服務(wù)器端得到的數(shù)據(jù)。

window.name

window對象的name屬性是一個很特別的屬性，當(dāng)該window的location變化，然后重新加載，它的name屬性可以依然保持不變。那么我們可以在頁面A中用iframe加載其他域的頁面B，而頁面B中用JavaScript把需要傳遞的數(shù)據(jù)賦值給 window.name，iframe加載完成之后，頁面A修改iframe的地址，將其變成同域的一個地址，然后就可以讀出window.name的值了。這個方式非常適合單向的數(shù)據(jù)請求，而且協(xié)議簡單、安全。不會像JSONP那樣不做限制地執(zhí)行外部腳本。

document.domain

通過修改document的domain屬性，我們可以在域和子域或者不同的子域之間通信。同域策略認(rèn)為域和子域隸屬于不同的域，比如 www.a.com和sub.a.com是不同的域，這時，我們無法在www.a.com下的頁面中調(diào)用sub.a.com中定義的JavaScript 方法。但是當(dāng)我們把它們document的domain屬性都修改為a.com，瀏覽器就會認(rèn)為它們處于同一個域下，那么我們就可以互相調(diào)用對方的 method來通信了。

window.postMessage

window.postMessage是HTML5定義的一個很新的方法，這個方法可以很方便地跨window通信。由于它是一個很新的方法，所以在很舊和比較舊的瀏覽器中都無法使用。

借助于服務(wù)器代碼來跨域（正向代理、反向代理）

正向代理：我借助與我的服務(wù)器, 像數(shù)據(jù)服務(wù)器發(fā)送數(shù)據(jù), 我的服務(wù)器只需要向數(shù)據(jù)服務(wù)器發(fā)送get請求即可

反向代理：與正向代理類似, 但是不借助于腳本, 而是直接使用 服務(wù)器映射 url.

例如： 我們的 url 是 http://studyit.com

數(shù)據(jù)服務(wù)器的 url 是 http://api.botue.com/login

在 apache 配置一個 url 的代理映射

理論上使用 url: http://studyit.com/api 是在網(wǎng)站根目錄下找 api 文件夾

但是現(xiàn)在 apache 提供一個映射的功能, 將 /api 映射到 http://api.botue.com

有了這個映射, 那么 訪問 http://api.botue.com/login 就可以利用 /api/login來訪問了.

反向代理的好處:

不僅實現(xiàn)了跨域( 服務(wù)器幫我們實現(xiàn)的 ), 而且訪問數(shù)據(jù)的時候就好像在訪問本地服務(wù)器一樣.如此, 諸如 cookie 等數(shù)據(jù)就可以直接獲得了.


怎么使用 反向代理( 不同的服務(wù)器的使用方法不一樣 )

1) 找到 httpd.conf 配置文件, 找到里面的 porxy 開頭的兩個模塊加載項. 去掉其注釋.

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

2) 找到虛擬主機的配置文件. 需要誰來做反向代理 就修改誰的配置文件，在虛擬主機的設(shè)置中( 就是那一對尖括號中 )添加兩個選項

ProxyRequests Off
ProxyPass /abc http://test2.com

3) 重啟服務(wù)器

CORS 跨域

CORS 是在 es5 之后提出的跨域方案. 只需要在服務(wù)器配置一個跨域響應(yīng)頭接口

與jsonp相比的優(yōu)點：

1、 JSONP只能實現(xiàn)GET請求，而CORS支持所有類型的HTTP請求。

2、 使用CORS，開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請求和獲得數(shù)據(jù)，比起JSONP有更好的錯誤處理。

3、 JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS。

代碼如下：

客戶端：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">請求</button>
  <script src="./jquery-3.2.0.js"></script>
  <script>
  
    $( '#btn' ).click(function () {

      $.ajax( {
        url: 'http://test2.com/03-index.php',
        success: function ( info ) {
          console.log( info );
        }

      });

    });
  </script>
</body>
</html>

服務(wù)器端：

<?php

// header( 'Access-Control-Allow-Origin: *' ); // 允許任意的網(wǎng)站跨域

header( 'Access-Control-Allow-Origin: http://test1.com' );//允許指定網(wǎng)站

echo 'cors 跨域';
?>

以上是“如何解決瀏覽器跨域問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：如何解決瀏覽器跨域問題-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://muchs.cn/article22/djggjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、外貿(mào)建站、移動網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化