跨域

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

同源策略

出于安全考慮，瀏覽器制定了同源策略， 限制了某些跨域請求。同源策略是跨域問題產(chǎn)生的根源。但是，同源策略并沒有限制所有的跨域請求，比如瀏覽器不限制加載嵌在<script>標簽中跨域的js文件。

跨域資源共享機制（CORS）

跨域資源共享（CORS）是瀏覽器提供的一種跨域協(xié)商機制，讓前后端協(xié)商是否可以發(fā)出跨域請求。
CORS添加了若干Access-controll-request-xxx 的頭，給客戶端聲明自己的源、要使用的頭部、用使用的請求方法；添加了若干Access-Controll-Allow-xxx的頭，給服務(wù)端聲明自己支持跨域的源、頭部和方法。
CORS將請求分為簡單請求和復(fù)雜請求，對于復(fù)雜跨域請求，發(fā)送真正請求之前要通過預(yù)檢機制和后端協(xié)商。

簡單請求

一個簡單請求要滿足以下所有條件：

• 只能使用GET、HEAD或POST請求方法

• 不得手動設(shè)置以下頭之外的頭

  • 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

  對于簡單請求，后端只需要在返回體里設(shè)置相應(yīng)的Access-controll-Allow-xxx就可以了

復(fù)雜請求和預(yù)檢機制

除了上述簡單請求外，其它請求都是復(fù)雜請求。對于復(fù)雜請求，瀏覽器會首先使用OPTION方法發(fā)送一個預(yù)驗請求（Preflighted requests）到后端，后端決定是否允許發(fā)送該跨域請求，將決定結(jié)果返回前端。只有預(yù)檢通過之后，真實的請求才會發(fā)送。流程如下：

(圖片來自：https://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server)

CORS跨域?qū)崿F(xiàn)

使用CORS機制，需要分清楚是簡單請求還是復(fù)雜請求，因為復(fù)雜跨域請求會觸發(fā)預(yù)檢機制。對于簡單跨域請求，后端只需要在響應(yīng)體里返回Access-Controll-Allow就可以了，但是對于復(fù)雜請求，則需要實現(xiàn)一個Option方法來返回Access-Controll-Allow，或者將請求調(diào)整為一個簡單請求。預(yù)檢整體交互過程如下圖所示：

一個常見的例子是，在響應(yīng)里設(shè)置了Access-Controll-Allow，然后使用Jquery發(fā)送一個跨域POST請求，你會發(fā)現(xiàn)沒有問題。接著使用 angular resource的save方法發(fā)送同樣一個跨域請求，你就會發(fā)現(xiàn)報錯了。這是為什么呢？因為jquery默認使用Content-Type:application/x-www-form-urlencoded，所以它發(fā)送的是一個簡單請求，但是，因為angular resource 默認使用Content-Type:application/json，所以它發(fā)送的是一個復(fù)雜請求，這觸發(fā)了瀏覽器的預(yù)檢機制。這時我們手動設(shè)置Content-Type:application/x-www-form-urlencoded，或者后端實現(xiàn)一個Option方法，

需要注意的是，改變content-type可能會導(dǎo)致后端解析數(shù)據(jù)出錯，例如content-type:application/x-www-form-urlencoded,參數(shù)是以鍵值對形式保存的，很多后端框架都會做自動解析操作，而content-type: text/plain,參數(shù)的形式就不確定了，只能以原始數(shù)據(jù)流的方式保存（放在PayLoad里面），需要自己解析。詳情請看 AJAX POST請求中參數(shù)以form data和request payload形式在servlet中的獲取方式

參考：Server-Side Access Control (CORS)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。