前端面試之跨域問題


同源策略

​ 同源策略是一種約定。同源是指"協議+域名+端口"三者相同,就算兩個不同的域名指向同一個ip地址,也不屬於同源。

​ 同源策略限制以下幾種行為:

  • Cookie、LocalStorage和indexDB無法讀取
  • DOM節點無法讀取和設置
  • AJAX請求不能發送

為什么要使用同源策略?同源策略主要是來防止CSRF攻擊的,CSRF攻擊是指利用用戶的登陸狀態發起惡意請求。但是同源策略並不能完全防止CSRF。

二、跨域

​ 跨域是指瀏覽器允許向服務器發送跨域請求,從而克服Ajax只能同源使用的限制。

​ 常見的跨域場景:

  • 同一域名,不同文件或路徑、不同端口、不同協議
  • 域名和域名對應相同ip、主域相同但子域不同
  • 不同域名

三、常見的解決跨域的方案

1、JSONP跨域

2、nodejs中間件代理跨域

3、document.domain + iframe跨域

4、location.hash + iframe跨域

5、window.name + iframe跨域

6、postMessage跨域

7、WebSocket協議跨域

8、跨域資源共享(CORS)

9、Nginx代理跨源

四、CORS

​ CORS是一個W3C標准,它允許瀏覽器向跨源服務器,發出XMLHTTPRequest請求,從而克服了AJAX只能同源使用的限制。

​ CORS跨域請求分為簡單請求和非簡單請求。

​ 滿足兩個條件之一就屬於簡單請求:

  • 使用head、get、或post
  • 請求的Header是Accept、Accept-Language、Content-Language、Content-Type只限於三個值:application/x-www-form-urlencoded、multipart/form-data、text/plain

​ 不同時滿足上邊兩個條件,就屬於非簡單請求。

簡單請求

​ 對於簡單請求,瀏覽器直接發出CORS請求。簡單來說,就是直接在頭信息中添加一個Origin字段,用來說明本次請求來自哪個源(協議+域名+端口)。服務器根據這個值決定是否同意這次請求。

​ CORS請求設置的響應頭字段,都以Access-Control-開頭。

復雜請求

​ 非簡單請求是那種對服務器有特殊要求的請求,比如請求方法是put或delete,或者Content-Type字段的類型是application/json。非簡單請求 的CORS請求,會在正式通信之前,增加一次HTTP查詢請求,稱為“預檢”請求。

​ 預檢請求用的方法是OPTIONS,表示這個請求是用來詢問的。請求頭信息里,關鍵字段是Origin,表示這個請求來自哪個源。除了Origin字段,預檢請求的頭信息包括兩個特殊字段。

  • Access-Control-Request-Method:必選

    用來列出瀏覽器的CORS請求會用到哪些HTTP方法。

  • Access-Control-Request-Headers:可選

    該字段是一個逗號分隔的字符串,指定瀏覽器CORS請求會額外發送的頭信息字段。

Nginx代理跨域

​ Nginx代理跨域實質和CORS跨域原理一樣,通過配置文件設置請求響應頭等字段。

​ Nginx配置解決iconfont跨域,在Nginx的靜態資源服務器中加入以下配置。

location / {
    add_header Access-Control-Allow-Origin *;
}

​ Nginx反向代理接口跨域。通過Nginx配置一個代理服務器域名(與domain1相同,端口不同)做跳板機,反向代理訪問domain2接口,並且可以順便修改cookie中的domain信息,方便當前域cookie寫入,實現跨域訪問。

個人微信公眾號


免責聲明!

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



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