跨域

跨域是指一個資源請求與其不在同一個域（源）的資源，不在同一個域（源）是指兩個域的協議、域名或端口不同。

同源策略

出于安全考慮，瀏覽器制定了同源策略， 限制了某些跨域請求。同源策略是跨域問題產生的根源。但是，同源策略并沒有限制所有的跨域請求，比如瀏覽器不限制加載嵌在<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中的獲取方式

參考：Server-Side Access Control (CORS)

總結

以上是生活随笔為你收集整理的跨域问题及CORS机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。