前端跨域的幾種解決方式總結(jié)（推薦）
搞大前端的，肯定都會遇到跨域問題的,雖然網(wǎng)上這方面的資料也很多，但我還是喜歡自己寫一遍，自己理解過、總結(jié)過的東西才記得最深刻。
同源策略
JavaScript 的同源策略，是由Netscape提出的一個(gè)著名的安全策略，為了阻止A站的JS去操作別的網(wǎng)站的數(shù)據(jù)。你想啊，你現(xiàn)在打開了瀏覽器，在一個(gè)tab窗口中打開了銀行網(wǎng)站，在另外一個(gè)tab窗口中打開了一個(gè)惡意網(wǎng)站，而那個(gè)惡意網(wǎng)站掛了一個(gè)的專門修改銀行信息的JavaScript，當(dāng)你訪問這個(gè)惡意網(wǎng)站并且執(zhí)行它JavaScript時(shí)，你的銀行頁面就會被這個(gè)JavaScript修改（比如說獲取你的卡號和密碼，又或者是轉(zhuǎn)賬到黑客的賬戶上等等），后果會非常嚴(yán)重！而同源策略就為了防止這種事情發(fā)生，它規(guī)定了A網(wǎng)站下的JS文件只能操作A網(wǎng)站下的數(shù)據(jù)，不能去操作B網(wǎng)站的數(shù)據(jù)。
為了方便理解,我們把這個(gè)詞拆分成同源和策略這2個(gè)詞吧（原諒我，我就怕你不理解?。?/p>
所謂同源指的就是指資源是來自同一個(gè)源的。如果兩個(gè)頁面擁有相同的協(xié)議，端口號，和主機(jī)（包括子域名和主域名），那么這兩個(gè)頁面就屬于同一個(gè)源。
所謂策略指的是可以做什么事情。同一個(gè)源下的JS可以操作同一個(gè)源下的數(shù)據(jù)。
舉個(gè)例子來看看你理解了沒有吧，看下面這個(gè)鏈接，協(xié)議是http協(xié)議，主機(jī)是store.company.com，端口號一般默認(rèn)的都是80了。然后和下面的這個(gè)表中的各個(gè)URL進(jìn)行比較，判斷一下哪些是同源的，哪些不是同源的。
| URL | 結(jié)果 | 原因 |
|---|---|---|
| http://store.company.com/dir2/other.html | 同源 | |
| http://store.company.com/dir/inner/another.html | 同源 | |
| https://store.company.com/secure.html | 非同源 | 協(xié)議不同 |
| http://store.company.com:81/dir/etc.html | 非同源 | 端口不同 |
| http://news.company.com/dir/other.html | 非同源 | 主機(jī)不同 |
什么是跨域
跨域
跨域的解決方案
方案1-JSONP
JSONP是JSON with padding的簡寫。JSONP由兩部分組成:回調(diào)函數(shù)和數(shù)據(jù)。
回調(diào)函數(shù)是客戶端和服務(wù)端約定好一個(gè)函數(shù)名，一般在請求中指定。
數(shù)據(jù)是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)。
JSONP是通過動態(tài)的
callback({"name": "michael"});
問題一：JSONP是需要?jiǎng)討B(tài)創(chuàng)建script標(biāo)簽的，我們需不需要處理這些script元素？怎么處理？
問題二：JSONP請求的時(shí)候，服務(wù)器發(fā)生錯(cuò)誤該怎么辦，比如服務(wù)器崩掉，比如返回了404頁面，前端該怎么處理這個(gè)錯(cuò)誤，難道直接讓它拋出么？
答案
JSONP只能實(shí)現(xiàn)GET請求，而CORS支持所有類型的HTTP請求
JSONP的兼容性好，不需要XMLHttpRequest的支持
方案2-跨域資源共享CORS
跨域資源共享定義了在必須訪問跨域資源的時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。他的原理是使用自定義的 HTTP 頭部，讓服務(wù)器與瀏覽器進(jìn)行溝通，主要是通過設(shè)置響應(yīng)頭的 Access-Control-Allow-Origin 來達(dá)到目的的。
方案3-document.domain
瀏覽器的同源策略使得不同域的框架是不能進(jìn)行JS的交互操作的。比如：有一個(gè)頁面是http://www.examples.com/a.htmls,在這個(gè)頁面中還有一個(gè)http://examples.com/b.htmls，很顯然，a.html與b.html是不同域的，所以我們無法通過在頁面中書寫js代碼來獲取iframe中的東西，但是，如果我們把這2個(gè)頁面的document.domain都設(shè)置成相同的域名就可以了，需要注意的是，我們只能把document.domain設(shè)置成自身或更高一級的父域，且主域名必須相同。
使用條件
document.domain適用于不同子域的框架之間的交互。
方案4-window.name
window對象有個(gè)name屬性，該屬性有一個(gè)特征：即在一個(gè)窗口的生命周期內(nèi)，窗口載入的所有頁面都是共享一個(gè)window.name的，每個(gè)頁面對window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過的所有頁面中的。
方案5-window.postMessage
window.postMessage（message,targetOrigin）方法，可以用來向其他的window對象發(fā)送消息，無論這個(gè)window對象是屬于同一個(gè)源還是不同源
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持!
相關(guān)文章
本文給大家總結(jié)了javascript中的循環(huán)遍歷，給大家總結(jié)的非常全面，感興趣的朋友跟隨小編一起看看吧2018-09-09
這篇文章主要為大家介紹了如何利用chatgpt保護(hù)您的js代碼詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
下面小編就為大家?guī)硪黄獪\談JavaScript變量的自動轉(zhuǎn)換和語句。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JavaScript語言不斷發(fā)布一些新特性，感覺要上天的節(jié)奏啊。本文搜集整理了一些它的高級概念和用法,需要的朋友可以參考下2022-07-07
JavaScript生成指定范圍隨機(jī)數(shù)和隨機(jī)序列的方法
這篇文章主要介紹了JavaScript生成指定范圍隨機(jī)數(shù)和隨機(jī)序列,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
uniapp自定義下拉刷新組件項(xiàng)目實(shí)踐總結(jié)分析
在日常的開發(fā)過程中,我們經(jīng)常遇到下拉刷新的場景,很方便的刷新游覽的內(nèi)容,在此實(shí)現(xiàn)了一個(gè)下拉刷新的自定義組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-09-09
javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換
本節(jié)主要介紹了javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換,需要的朋友可以參考下2014-07-07
ES6 Array常用擴(kuò)展的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Array常用擴(kuò)展的應(yīng)用,結(jié)合實(shí)例形式分析各種常見擴(kuò)展方法針對Array數(shù)組的轉(zhuǎn)換、遍歷、查找、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS開發(fā)自己的類庫,結(jié)合實(shí)例形式分析了javascript開發(fā)類庫的原理、組成及實(shí)現(xiàn)方法,需要的朋友可以參考下2019-08-08
基于JavaScript實(shí)現(xiàn)動態(tài)添加刪除表格的行
又一個(gè)動態(tài)控制表格的效果，用JavaScript動態(tài)生成表格行、表格列，以及還可動態(tài)刪除這些行列，行等，運(yùn)行代碼后，點(diǎn)擊對應(yīng)的功能按鈕，即可實(shí)現(xiàn)對應(yīng)的表格操作功能，接下來通過代碼實(shí)例給大家介紹JavaScript實(shí)現(xiàn)動態(tài)添加刪除表格的行，需要的朋友參考下2016-02-02