跨域

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

同源策略

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

跨域資源共享機(jī)制（CORS）

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

簡(jiǎn)單請(qǐng)求

一個(gè)簡(jiǎn)單請(qǐng)求要滿足以下所有條件：

• 只能使用GET、HEAD或POST請(qǐng)求方法

• 不得手動(dòng)設(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

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

復(fù)雜請(qǐng)求和預(yù)檢機(jī)制

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

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

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

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

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

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

參考：Server-Side Access Control (CORS)

總結(jié)

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

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