造成跨域的原因和解決方法

瀏覽器的同源策略是瀏覽器上為安全性考慮實施的非常重要的安全策略。
從一個域上載入的指令碼不允許訪問另外一個域的文件屬性。
舉個例子：比如一個惡意網站的頁面通過iframe嵌入了銀行的登入頁面（二者不同源），
如果沒有同源限制，惡意網頁上的javascript指令碼就可以在使用者登入銀行的時候獲取使用者名稱和密碼。
何謂同源:URL由協議、域名、埠和路徑組成，如果兩個URL的協議、域名和埠相同，則表示它們同源。
在瀏覽器中，<script>、<img>、<iframe>、<link>等標籤都可以載入跨域資源，而不受同源限制，
但瀏覽器會限制指令碼中發起的跨域請求。比如，使用 XMLHttpRequest 物件和Fetch發起 HTTP 請求就必須遵守同源策略。
Web 應用程式通過 XMLHttpRequest 物件或Fetch能且只能向同域名的資源發起 HTTP 請求，而不能向任何其它域名發起請求。
不允許跨域訪問並非是瀏覽器限制了發起跨站請求，而是跨站請求可以正常發起，但是返回結果被瀏覽器攔截了。
最好的例子是CSRF跨站攻擊原理，請求是傳送到了後端伺服器,無論是否設定允許跨域,
有些瀏覽器不允許從HTTPS跨域訪問HTTP，比如Chrome和Firefox，這些瀏覽器在請求還未發出的時候就會攔截請求,這是特例。

克服跨域限制的方法有(實踐中後兩種最常用，所以重點介紹):
(1)通過jsonp跨域
(2)通過修改document.domain來跨子域
(3)使用window.name來進行跨域
(4)使用HTML5中新引進的window.postMessage方法來跨域傳送資料
(5)使用代理伺服器,使用代理方式跨域更加直接，因為同源限制是瀏覽器實現的。如果請求不是從瀏覽器發起的，就不存在跨域問題了。
使用本方法跨域步驟如下：
1. 把訪問其它域的請求替換為本域的請求
2. 伺服器端的動態指令碼負責將本域的請求轉發成實際的請求
為了通過Ajax從http://localhost:8080訪問http://localhost:8081/api，可以將請求發往http://localhost:8080/api。
然後利用Apache Web伺服器的Reverse Proxy功能做如下配置：ProxyPass /api http://localhost:8081/api
(6)CORS全稱是"跨域資源共享"（Cross-origin resource sharing),CORS需要瀏覽器和伺服器同時支援。目前，所有瀏覽器都支援該功能
(IE瀏覽器不能低於IE10)，因此，實現CORS通訊的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通訊。
瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）
（1) 請求方法是以下三種方法之一：HEAD GET POST
（2）HTTP的頭資訊不超出以下幾種欄位：Accept Accept-Language Content-Language Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同時滿足上面兩個條件，就屬於非簡單請求。

對於簡單請求，瀏覽器在發出CORS請求時會在頭資訊之中增加一個Origin欄位。伺服器的返回會多出3個欄位：
Access-Control-Allow-Origin(必須) 允許跨域的源
Access-Control-Allow-Credentials(可選) 表示是否允許傳送Cookie。預設情況下，Cookie可以包含在請求中，一起發給伺服器
如果伺服器不需要瀏覽器傳送Cookie，刪除該欄位即可。
Access-Control-Expose-Headers(可選) CORS請求時，XMLHttpRequest物件的getResponseHeader()方法只能拿到6個基本欄位：
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他欄位，
就必須在Access-Control-Expose-Headers裡面指定。如指定Access-Control-Expose-Headers: FooBar，則可通過
getResponseHeader('FooBar')獲取FooBar欄位的值。

非簡單請求是那種對伺服器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type欄位的型別是application/json。
非簡單請求的CORS請求，會在正式通訊之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。
"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭資訊裡面，關鍵欄位是Origin，表示請求來自哪個源。
瀏覽器先詢問伺服器，當前網頁所在的域名是否在伺服器的許可名單之中，以及可以使用哪些HTTP動詞和頭資訊欄位。只有得到肯定答覆，
瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。