http-web前后端的跨域

妤鋒シ發(fā)布于2019-08-23 13:53 / 2419人閱讀

摘要：本文詳見文件夾提供主服務(wù)開啟服務(wù)提供一個(gè)靜態(tài)容器開啟服務(wù)文件夾客戶端頁(yè)面，發(fā)送或者瀏覽器跨域相關(guān)跨域是為了保證服務(wù)端的安全，不允許隨便的請(qǐng)求，這是瀏覽器的安全行為和不同域，瀏覽器并不知道映射到的是，所以認(rèn)為他們不同域普通跨域之當(dāng)瀏覽

本文詳見

github: https://github.com/captainJac...

server文件夾 server.js 提供主server api服務(wù)

node server/server.js 開啟服務(wù)

staticServer.js 提供一個(gè)靜態(tài)html容器

node server/staticServer.js 開啟服務(wù)

www文件夾 cross-domain.html 客戶端頁(yè)面，發(fā)送XHR或者fetch 瀏覽器跨域相關(guān)

跨域是為了保證服務(wù)端的安全，不允許隨便的請(qǐng)求，這是瀏覽器的安全行為

tips

localhost和127.0.0.1不同域，瀏覽器并不知道localhost映射到的是127.0.0.1，所以認(rèn)為他們不同域

普通跨域之Access-Control-Allow-Origin

當(dāng)瀏覽器出現(xiàn)跨域報(bào)錯(cuò)時(shí)，==其實(shí)服務(wù)器的響應(yīng)已經(jīng)到達(dá)瀏覽器了==，只不過(guò)瀏覽器會(huì)對(duì)比請(qǐng)求的頭信息，對(duì)比當(dāng)前域是否是被Access-Control-Allow-Origin頭信息允許的，如果不允許，則提示報(bào)錯(cuò)

JSONP

對(duì)于link,script,image等標(biāo)簽src或ref是可以拿到非同域的資源，js動(dòng)態(tài)創(chuàng)建script標(biāo)簽則可獲取到數(shù)據(jù)，這個(gè)不需要后端支持

CORS預(yù)請(qǐng)求&&跨域

敲黑板：Access-Control-Allow-Origin并不能完全支持跨域，還有其他限制，比如使用fetch，有些自定義頭信息，超出允許范圍的方法等，在跨域的時(shí)候，都是不被允許的

預(yù)請(qǐng)求

在以下允許范圍之外的，都需要通過(guò)預(yù)請(qǐng)求的驗(yàn)證&&一些限制

允許方法

GET

POST

HEAD

允許Content-Type

text/plain

multipart/form-data

application/x-www-form-urlencoded

請(qǐng)求頭限制，查看官方文檔吧

XMLHttpRequestUpload對(duì)象均沒有注冊(cè)任何時(shí)間監(jiān)聽器

請(qǐng)求中沒有使用ReadableStream對(duì)象

預(yù)請(qǐng)求根據(jù)什么來(lái)判斷這個(gè)請(qǐng)求是否是被允許的呢 - Response Headers信息，瀏覽器讀取Response Headers信息來(lái)知道當(dāng)前請(qǐng)求是不是被允許的

對(duì)于CORS跨域，限制條件有很多，如下，這些在限制條件之內(nèi)才可以允許

自定義的方法

Content-Type

頭信息

… 詳見官方文檔

以自定義頭信息舉例

前端

fetch("http://127.0.0.1:8887", {
  method: "POST",
  // 此處添加一條自定義頭信息
  headers: {
    "X-Test-Cors111": "test"
  }
})

后端

response.writeHead(200, {
  "Access-Control-Allow-Origin": "*",
})

此時(shí)瀏覽器提示準(zhǔn)確的相應(yīng)的報(bào)錯(cuò)

此時(shí)后端需要如下，允許這種自定義頭信息，才可以可以正常返回

response.writeHead(200, {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "X-Test-Cors111"
})

同理，還有以下其他的限制

"Access-Control-Allow-Headers": "X-Test-Cors111" //針對(duì)自定義頭信息

"Access-Control-Allow-Methods": "PUT, DELETE", // 針對(duì)自定義方法

"Access-Control-Max-Age": "1000", // Access-Control-Max-Age：當(dāng)前請(qǐng)求下面，以上述形式請(qǐng)求允許跨域的，1000s之內(nèi)不需要發(fā)送預(yù)請(qǐng)求來(lái)驗(yàn)證了，直接發(fā)起正式的請(qǐng)求即可

tips:

chrome devTools有時(shí)候會(huì)不提示options預(yù)請(qǐng)求的XHR？發(fā)送options預(yù)請(qǐng)求的不好驗(yàn)證查看詳細(xì)的http請(qǐng)求和響應(yīng)的內(nèi)容:  curl -v www.baidu.com