瀏覽器同源策略和跨域請求

瀏覽器同源策略

同源：若是兩個頁面擁有相同的協議(如http,https等)，端口(80,443)和域名(www.happyjava.cn)，那麼這兩個頁面就屬於同一個源。

同源策略：瀏覽器的一套安全機制，這些安全機制都以同源爲限制條件。同源策略，隔離了不一樣源網站的cookie，攔截不一樣源的請求，只容許同源網站的腳本運行，保證了web網站的安全。

若是沒有同源策略，當你打開銀行網站，同時又打開了另一個惡意網站。這時，惡意網站就有能力修改你這個網站的dom，使你後續發送的請求都發送到惡意網站的服務器上，而後惡意網站就能獲取到你的cookie等信息，將會對我的的隱私財產構成巨大的威脅。

同源策略的缺點和權衡

若是嚴格的遵循同源策略，也會面臨不少的問題。好比，圖片，css，js等都得從同域名網站下去獲取，我的網站，小網站這樣是沒問題的。可是對於用戶量很大的網站，顯然對服務器的壓力將會很大，圖片等大文件都會佔用服務器的帶寬。

不要安全不行，不要性能也不行。在安全和性能上的考慮，使得現代瀏覽器在安全性和可用性之間選擇了一個平衡。因此，如今的瀏覽器，對於一些資源標籤，都開了後門權限。好比，img script style等標籤，都容許垮域引用資源，嚴格說這都是不符合同源要求的。

跨域請求

瞭解了瀏覽器的同源策略以後，能夠接着談談跨域請求的問題了。由於同源策略的存在，因此跨域的AJAX都是會被瀏覽器攔截下來的。咱們先來看一個例子:

這是一個andt-pro的頁面，有個請求當前用戶的方法，而後把用戶信息顯示在右上角。因爲是先後端分離開發的，因此前端頁面在http://localhost:8000上，後端接口在http://localhost:8080上，這就是不一樣源了。請求的結果以下：

我在後端的接口裏也作了請求輸出：

@GetMapping(value = "/currentUser")
public Object currentUser() {
 System.out.println("請求過來了");
 Map map = new HashMap();
 map.put("name", "Happy");
 map.put("avatar", "http://locahost:8080/head.jpg");
 return map;
}

經過上面兩個結果，能夠明顯看出，請求是成功了的。可是，結果卻被瀏覽器給攔截了: xxx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource。

解決跨域問題

以前我寫了【快學springboot】6.WebMvcConfigurer配置靜態資源和解決跨域，在這篇文章裏，我介紹瞭如何經過springboot的配置解決跨域問題。其實解決跨域問題有不少種方式，這裏暫時不作其餘探討了。有時間會再寫一篇文章來總結。

解決了跨域問題以後，刷新以前的頁面：

請求成功，暱稱和頭像都出來了。

安全防範

如今的瀏覽器，在安全和性能上作了權衡，並非嚴格遵循同源策略的。因此，在開發web的時候，要注意防範XSS攻擊等。別被利用XSS漏洞，經過輸入框，給你注入了惡意的js代碼等。