前端跨域請求和解決方案

1. 什麼是跨域請求

• 前端開發中，常見的html标簽：a,form,img,script,link,iframe以及ajax操作都可以指向一個資源位址或者說可以發起對一個資源的請求，這裡的請求就存在同域請求還是跨域請求
• 跨域請求是指：目前發起請求的域與該請求指向的資源所在的域不一緻（這裡所有的域是協定，域名，和端口号的合集，同域就是協定、域名和端口号均相同，任何一個不同都是跨域）

2.  哪些是跨域請求

源URL	請求URL	是否跨域	說明
http://a.com/a	http://a.com/b	否	同協定同域名、同端口号，不同資源請求，不是跨域請求
http://a.com/a	http://a.coms:8080/b	是	端口不同
http://a.com/a	https://a.com/b	是	協定不同
http://www.a.com/a	http://x.a.com/b	是	主域名相同，但是子域名不相同
http://a.com/a	http://b.com/b	是	域名不同

3. 我們前端開發為什麼會出現跨域請求

• 同源政策是浏覽器的核心基礎安全政策，我們開發時會避免跨域請求，同源政策是來防禦一些非法的攻擊，但是不能因為防禦攻擊就将所有的跨域進行攔截
• 開發中，會常常調用第三方的服務接口，很多專業的資訊服務都是由不同提供商來做的，他們提供各種接口，這時候就無法避免的要使用跨域請求（這種接口服務多是采用cors來解決跨域的）
• 前後端分離的項目，前後端分屬不同的服務，就會存在跨域問題，這時候會采用反向代理的方式來解決跨域

4. 跨域請求解決方案

• 修改浏覽器的安全設定（有效但不可取）
• JSONP
• 跨域資源共享CORS（cross-origin resource sharing）
• iframe(問題較多也不可取)
• 反向代理

4.1 JSONP

• JSONP（JSON with Padding）
• JSONP原理：AJax存在跨域安全問題，但是script标簽引用路徑不存在問題，所有就會把ajax請求轉變為script标簽，直接擷取資源，對資源資料處理再輸出

4.2 跨域資源共享CORS (Cross-Origin Resource Sharing)

• CORS 是一個W3C标準，新增的一組HTTP首部字段允許伺服器聲明哪些來源請求有權限通路哪些資源，也就是運作浏覽器向其聲明了CORS的站點進行跨域請求
• 特點就是會在響應的HTTP首部增加 Access-Control-Allow-Origin 等資訊，進而判斷哪些資源站點可以進行跨域請求，還有幾個相關的HTTP頭部字段進行精細化控制
• CORS 與 JSONP 對比來說優勢比較大，JSONP隻支援GET方式，局限性較大，而且不符合處理業務的正常流程。采用CORS的話，前端編碼與正常非跨域請求沒有什麼不同，在目前很多的模拟接口服務和一些公共服務上都會用

4.3 反向代理

• 不允許跨域請求，那麼就不進行跨域。在請求到達服務前部署一個服務，将接口請求進行轉發，這就是反向代理。通過一定的轉發規則可以将請求轉發到其他的服務

// nginx 
server{
    listen 9999
    server_name localhost
    location ^~/api{
        proxy_padd http://localhost:3000
    }
}
           

• 反向代理将我們前端後端項目統一通過反向代理來提供對外的服務，這樣看上去就跟不存在跨域一樣
• 反向代理的缺點就是，需要對Nginx等一些反向代理服務的配置。目前前後端分離的項目多采用這種方式

總結

• 一些公共服務類的多采用 CORS 
• 公司内部的前後端分離項目多采用 反向代理