JavaScript跨域

時間：2023-02-20 18:22:01 | 來源：建站知識

時間：2023-02-20 18:22:01 來源：建站知識

JavaScript跨域：

同源

定義：源=協(xié)議+域名+端口號，當兩個url的這三個完全一致，即認為二者同源。

http://qq.com和http://www.qq.com不同源（域名）
https://qq.com:8888和https://qq.com:8889不同源（端口號）
https://qq.com:8888和http://qq.com:8888不同源（協(xié)議）

同源策略：瀏覽器規(guī)定，如果JS運行在源A中，那么就只能獲取到源A的數(shù)據(jù)，不能獲取源B的，即不允許跨域訪問。同源策略一句話概括就是：不同源的頁面之間，不允許相互訪問數(shù)據(jù)。

同源策略誤區(qū)：既然你說不允許跨域訪問數(shù)據(jù)，那為什么可以跨域使用js，css和圖片等？例如在我們自己的index中“跨域”訪問jquery的庫。

正解：同源策略限制的是數(shù)據(jù)訪問，我們引用js，css等的時候，其實（可能）并不知道里面的內(nèi)容。這就好比你借別人的門禁卡來開門一樣，你并不知道門禁卡里面的相關(guān)信息，但是依舊可以開門。當然，我這里用的是可能，因為對于一些公共資源，網(wǎng)站可能設(shè)置相應(yīng)協(xié)議使其他源可以跨域訪問。

跨域

跨域指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本，它是由瀏覽器的同源策略造成的,是瀏覽器對javascript施加的安全限制，防止他人惡意攻擊網(wǎng)站。為了保護用戶隱私，瀏覽器禁止跨域數(shù)據(jù)訪問，這是瀏覽器的功能，是故意要這樣設(shè)計的。

比如一個黑客,他利用iframe 把真正的銀行登錄頁面嵌到他的頁面上,當你使用真實的用戶名和密碼登錄時,如果沒有同源限制,他的頁面就可以通過JavaScript 讀取到你的表單中輸入的內(nèi)容,這樣用戶名和密碼就輕松到手了。

---

上面介紹了這么同源和跨域，那么，不禁有同學(xué)會提出疑惑，難道就不能突破源的限制進行跨域數(shù)據(jù)訪問了嗎？就好比你一些公共資源如天氣資源等，其他網(wǎng)站就不能訪問（跨域訪問）了嗎？

答：有兩種策略可以進行跨域訪問，分別是CORS和JSONP。

CORS——跨域資源共享

通俗解釋就是在你需要開源的網(wǎng)站后端設(shè)置請求頭

//語法
Access-Control-Allow-Origin: * //該資源可以被 任意 外域訪問
Access-Control-Allow-Origin: https://foo.example //服務(wù)端僅允許來自 https://foo.example 的訪問

所以說，開源精神是互聯(lián)網(wǎng)最偉大的精神之一。

JSONP

聲明：JSONP和JSON半毛錢關(guān)系沒有

問題：有了CORS，為啥還要JSOPN？

答：IE不支持CORS，所以需要用到JSONP來進行跨域。

面試回答JSONP：請問JSONP是啥？

答：由于當前瀏覽器不支持CORS，我們必須使用另一種方式來跨域，于是我們請求一個JS文件，這個文件會執(zhí)行一個回調(diào)，回調(diào)里既有我們的數(shù)據(jù)。回調(diào)的名字可以隨機生成，以callback的參數(shù)傳給后臺，后臺會返回并執(zhí)行。

JSONP優(yōu)點：兼容IE，可以跨域（廢話）

JSONP缺點：由于是script標簽，所以讀不到AJAX那么精確的狀態(tài)，如獲取到響應(yīng)頭，狀態(tài)碼等（因為只監(jiān)聽了onload和onerror），script標簽只能發(fā)get請求，不能發(fā)post請求（面試官最希望聽到的）。

////封裝一個jsonpfunction jsonp(url) { return new Promise((resolve, reject) => { const random = Math.random() window[random] = (data) => { resolve(data) //成功調(diào)用resolve } const script = document.createElement('script') script.src = `${url}?callback=${random}` script.onload = () => { script.remove()//加載完后干掉 } script.onerror = () => { reject() //失敗調(diào)用reject } document.body.appendChild(script) })}

---

更多詳情請查閱