網站跨域的五種解決方式

1、什麼是跨越?

  • 一個網頁向另一個不同域名/不同協議/不同端口的網頁請求資源,這就是跨域。
  • 跨域原因產生:在當前域名請求網站中,默認不允許通過ajax請求發送其他域名。

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

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

3、什麼是同源策略?

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

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

  • 是為了保證用戶的信息安全,防止惡意網站竊取數據,如果網頁之間不滿足同源要求,將不能:
  • 1、共享Cookie、LocalStorage、IndexDB
  • 2、獲取DOM
  • 3、AJAX請求不能發送

同源策略的非絕對性:

<script>

<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 跨域的原理就是用的動態加載>
$.ajax({
url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
type: 'GET', // jsonp模式只有GET 是合法的
data: {
'action': 'aaron'
},
dataType: 'jsonp', // 數據類型
jsonp: 'backfunc', // 指定回調函數名,與服務器端接收的一致,並回傳回來
})
  • 使用JSONP 模式來請求數據的整個流程:客戶端發送一個請求,規定一個可執行的函數名(這裡就是 jQuery做了封裝的處理,自動幫你生成回調函數並把數據取出來供success屬性方法來調用,而不是傳遞的一個回調句柄),服務器端接受了這個 backfunc函數名,然後把數據通過實參的形式發送出去
  • (在jquery 源碼中, jsonp的實現方式是動態添加


分享到:


相關文章: