前端面試題常考&必考之--跨域的解決辦法


1.為啥出現跨域???

在制定Html規則時,為了安全的考慮,一個源的腳本(網頁,網站)不能與另一個源的資源進行交互,

所以就引發一個詞叫做“同源策略”

同源策略:同源策略是一種約定,它是瀏覽器最核心的也最基本的安全功能,如果缺少了同源策略,則

瀏覽器的正常功能可能會受到影響。

同源:所謂同源(即指在同一個域),就是兩個頁面具有相同的協議(protocol),主機(host)和端口號(port)

 

2.啥是跨域???

當協議,主機,和端口號有一個不同時,就是跨域。

 

 

 

需要注意的是:默認的端口號是80

 

3.受限制的場景有哪些呢???(面試回答)

 

 1)Cookie,LocalStorage無法讀取

 2)DOM和js對象無法讀取,主要是iframe(可以說有iframe的對象無法讀取)

 3) Ajax請求不能發送

 

跨域報錯長這樣子:

 

 

 4.解決跨域的方法???

對最主要的AJAX跨域來說(也就是平常調接口時):

1)(后端)服務器配置CORS(跨域資源共享)

2) (后端)node.js或nginx,反向代理,把跨域改造成同域

3)(前端)將JSON升級成JSONP,在JSON的基礎上,利用<script>標簽可以跨域的特性,加上頭設置

對iframe跨域來說:

H5提供了postMessage()的方法,可以在父子頁面進行通信(加分項)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM