跨域問題及CORS機制
跨域
跨域是指一個資源請求與其不在同一個域（源）的資源，不在同一個域（源）是指兩個域的協議、域名或端口不同。
同源策略
出於安全考慮，瀏覽器制定了同源策略， 限制了某些跨域請求。同源策略是跨域問題產生的根源。但是，同源策略並沒有限制所有的跨域請求，比如瀏覽器不限制加載嵌在<script>標籤中跨域的js文件。
跨域資源共享機制（CORS）
跨域資源共享（CORS）是瀏覽器提供的一種跨域協商機制，讓前後端協商是否可以發出跨域請求。
CORS添加了若干Access-controll-request-xxx 的頭，給客戶端聲明自己的源、要使用的頭部、用使用的請求方法；添加了若干Access-Controll-Allow-xxx的頭，給服務端聲明自己支持跨域的源、頭部和方法。
CORS將請求分爲簡單請求和複雜請求，對於複雜跨域請求，發送真正請求之前要通過預檢機制和後端協商。
簡單請求
一個簡單請求要滿足以下所有條件：
只能使用
GET、HEAD或POST請求方法不得手動設置以下頭之外的頭
- Accept
- Accept-Language
- Content-Language
- Content-Type
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
Content-Type只能是下面的一種
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
對於簡單請求，後端只需要在返回體裏設置相應的
Access-controll-Allow-xxx就可以了
複雜請求和預檢機制
除了上述簡單請求外，其它請求都是複雜請求。對於複雜請求，瀏覽器會首先使用OPTION方法發送一個預驗請求（Preflighted requests）到後端，後端決定是否允許發送該跨域請求，將決定結果返回前端。只有預檢通過之後，真實的請求才會發送。流程如下：
(圖片來自：https://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server)
CORS跨域實現
使用CORS機制，需要分清楚是簡單請求還是複雜請求，因爲複雜跨域請求會觸發預檢機制。對於簡單跨域請求，後端只需要在響應體裏返回Access-Controll-Allow就可以了，但是對於複雜請求，則需要實現一個Option方法來返回Access-Controll-Allow，或者將請求調整爲一個簡單請求。預檢整體交互過程如下圖所示：
一個常見的例子是，在響應裏設置了Access-Controll-Allow，然後使用Jquery發送一個跨域POST請求，你會發現沒有問題。接着使用 angular resource的save方法發送同樣一個跨域請求，你就會發現報錯了。這是爲什麼呢？因爲jquery默認使用Content-Type:application/x-www-form-urlencoded，所以它發送的是一個簡單請求，但是，因爲angular resource 默認使用Content-Type:application/json，所以它發送的是一個複雜請求，這觸發了瀏覽器的預檢機制。這時我們手動設置Content-Type:application/x-www-form-urlencoded，或者後端實現一個Option方法，
需要注意的是，改變content-type可能會導致後端解析數據出錯，例如content-type:application/x-www-form-urlencoded,參數是以鍵值對形式保存的，很多後端框架都會做自動解析操作，而content-type: text/plain,參數的形式就不確定了，只能以原始數據流的方式保存（放在PayLoad裏面），需要自己解析。詳情請看 AJAX POST請求中參數以form data和request payload形式在servlet中的獲取方式