CORS解決前端跨域問題

最近在專案中，與後台對接的時候，出現了一些問題

網頁上出現了這樣的報錯：

檢視了我發出去的報文，發現報文被瀏覽器攔截了，並沒有發出。

查詢了一下，發現這是瀏覽器同源策略引起的跨域問題，在此記錄一下解決方案。

跨域是指乙個域下的文件或指令碼試圖去請求另乙個域下的資源，這裡跨域是廣義的。

廣義的跨域：

2.) 資源嵌入：

、、

3.) 指令碼請求： js發起的ajax請求、dom和js物件的跨域操作等

我們通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。

什麼要有同源策略？

同源策略/sop（same origin policy）是一種約定，由netscape公司2023年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到xss、csfr等攻擊。

所謂同源是指」協議+網域名稱+埠」三者相同，即便兩個不同的網域名稱指向同乙個ip位址，也非同源。

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

1.) cookie、localstorage 和 indexdb 無法讀取

2.) dom 和 js物件無法獲得

3.) ajax 請求不能傳送

在我的專案中一開始的問題是ajax 請求不能傳送

跨域的方法其實有很多種，此次我採用的是cors方法。

cors是乙個w3c標準，全稱是」跨域資源共享」（cross-origin resource sharing）。

它允許瀏覽器向跨源伺服器，發出xmlhttprequest請求，從而克服了ajax只能同源使用的限制。

cors需要瀏覽器和伺服器同時支援。目前，所有瀏覽器都支援該功能，ie瀏覽器不能低於ie10。

整個cors通訊過程，都是瀏覽器自動完成，不需要使用者參與。對於開發者來說，cors通訊與同源的ajax通訊沒有差別，**完全一樣。瀏覽器一旦發現ajax請求跨源，就會自動新增一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。

因此，實現cors通訊的關鍵是伺服器。只要伺服器實現了cors介面，就可以跨源通訊。

cors詳細介紹及機制訪問：

此次我需要的是ajax的get和post方法的解決方案，這屬於簡單請求

對於簡單請求

服務端：設定以下引數

access-control-allow-origin：*

//*代表允許所有的網域名稱訪問，寫www.abc.com的話就是只允許來自該網域名稱的跨域請求

access-control-allow-credentials: true

//cors請求預設不傳送cookie和http認證資訊。如果要把cookie發到伺服器，一方面要伺服器同意，指定access-control-allow-credentials欄位。

客戶端：

//需要在ajax請求中開啟withcredentials屬性。

在我的ajax中

現在檢查我們發出去的http報文，可以發現發出去的報文帶上了cookie和乙個origin的項，伺服器收到報文，檢查origin是否在它的access-control-allow-origin裡面，是的話才提供服務。