網站跨域的五種解決方式

little bottle
發布: 2023-04-06 12:44:02
轉載
5211 人瀏覽過

因為瀏覽器使用了同源策略,所以產生跨域請求。一個網頁向另一個不同網域名稱/不同協定/不同連接埠的網頁請求資源,這就是跨網域。本篇文章提供了5種方式來解決網站跨域,有興趣的朋友可以看看。

1、什麼是跨越?

  • 一個網頁向另一個不同網域名稱/不同協定/不同連接埠的網頁要求資源,這就是跨網域。
  • 跨域原因產生:在目前網域請求網站中,預設不允許透過ajax請求發送其他網域。

2、為什麼會產生跨域請求?

  • 因為瀏覽器使用了同源策略

#3、什麼是同源策略?

  • 同源策略是Netscape提出的一個著名的安全策略,現在所有支援JavaScript的瀏覽器都會使用這個策略。同源策略是瀏覽器最核心也最基本的安全功能,如果缺少同源策略,瀏覽器的正常功能可能會受到影響。可以說web是建構在同源策略的基礎上的,瀏覽器只是針對同源策略的一種實作。

4、為什麼瀏覽器要使用同源策略?

  • 是為了保證使用者的資訊安全,防止惡意網站竊取數據,如果網頁之間不滿足同源要求,將不能:

    • 1、共享Cookie、LocalStorage、IndexDB
    • #2、取得DOM

  • 3、AJAX請求不能發送

  • 同源策略的非絕對性:
  • <script></script>
    <img/>
    <iframe/>
    <link/>
    <video/>
    <audio/>
    登入後複製
  • 等帶有src屬性的標籤可以從不同的域載入和執行資源。其他插件的同源策略:flash、java applet、silverlight、googlegears等瀏覽器載入的第三方插件也有各自的同源策略,只是這些同源策略不屬於瀏覽器原生的同源策略,如果有漏洞則可能被駭客利用,從而留下XSS攻擊的後患所謂的同源指:網域名稱、網路協定、連接埠號碼相同,三條有一條不同就會產生跨域。例如:你用瀏覽器開啟http://baidu.com,瀏覽器執行JavaScript腳本時發現腳本向http://cloud.baidu.com網域發請求,這時瀏覽器就會報錯,這就是跨域報錯。
解決方案有五:

1、前端使用jsonp (不建議使用)
  • 當我們正常地請求一個JSON資料的時候,服務端返回的是一串 JSON類型的數據,而我們使用 JSONP模式來請求資料的時候服務端回傳的是一段可執行的 JavaScript程式碼。因為jsonp 跨域的原理就是用的動態載入 script的src ,所以我們只能把參數透過 url的方式傳遞,所以jsonp的 type型別只能是get範例:

$.ajax({
    url: &#39;http://192.168.1.114/yii/demos/test.php&#39;, //不同的域
    type: &#39;GET&#39;, // jsonp模式只有GET 是合法的
    data: {
        &#39;action&#39;: &#39;aaron&#39;
    },
    dataType: &#39;jsonp&#39;, // 数据类型
    jsonp: &#39;backfunc&#39;, // 指定回调函数名,与服务器端接收的一致,并回传回来
})
登入後複製

    #使用JSONP 模式來請求資料的整個流程:客戶端發送一個請求,規定一個可執行的函數名稱(這裡就是 jQuery做了封裝的處理,自動幫你產生回呼函數並把資料取出來供success屬性方法來呼叫,而不是傳遞的一個回調句柄),伺服器端接受了這個 backfunc函數名,然後把資料透過實參的形式發送出去
  •  
(在jquery 源碼中, jsonp的實作方式是動態新增

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板