http-web先後端的跨域

本文詳見

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

server文件夾

server.js 提供主server api服務

node server/server.js 開啓服務

staticServer.js 提供一個靜態html容器

node server/staticServer.js 開啓服務

www文件夾

cross-domain.html 客戶端頁面，發送XHR或者fetch

瀏覽器跨域相關

跨域是爲了保證服務端的安全，不容許隨便的請求，這是瀏覽器的安全行爲

tips

localhost和127.0.0.1不一樣域，瀏覽器並不知道localhost映射到的是127.0.0.1，因此認爲他們不一樣域

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

當瀏覽器出現跨域報錯時，==其實服務器的響應已經到達瀏覽器了==，只不過瀏覽器會對比請求的頭信息，對比當前域是不是被Access-Control-Allow-Origin頭信息容許的，若是不容許，則提示報錯

JSONP

對於link,script,image等標籤src或ref是能夠拿到非同域的資源，js動態建立script標籤則可獲取到數據，這個不須要後端支持

CORS預請求&&跨域

敲黑板：Access-Control-Allow-Origin並不能徹底支持跨域，還有其餘限制，好比使用fetch，有些自定義頭信息，超出容許範圍的方法等，在跨域的時候，都是不被容許的

預請求

在如下容許範圍以外的，都須要經過預請求的驗證&&一些限制

• 容許方法

  • GET
  • POST
  • HEAD

• 容許Content-Type

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded
• 請求頭限制，查看官方文檔吧
• XMLHttpRequestUpload對象均沒有註冊任什麼時候間監聽器
• 請求中沒有使用ReadableStream對象

預請求根據什麼來判斷這個請求是不是被容許的呢 - Response Headers信息，瀏覽器讀取Response Headers信息來知道當前請求是否是被容許的

對於CORS跨域，限制條件有不少，以下，這些在限制條件以內才能夠容許

• 自定義的方法
• Content-Type
• 頭信息
• … 詳見官方文檔

以自定義頭信息舉例

前端

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

後端

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

此時瀏覽器提示準確的相應的報錯

此時後端須要以下，容許這種自定義頭信息，才能夠能夠正常返回

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

同理，還有如下其餘的限制

• 'Access-Control-Allow-Headers': 'X-Test-Cors111' //針對自定義頭信息
• 'Access-Control-Allow-Methods': 'PUT, DELETE', // 針對自定義方法
• 'Access-Control-Max-Age': '1000', // Access-Control-Max-Age：當前請求下面，以上述形式請求容許跨域的，1000s以內不須要發送預請求來驗證了，直接發起正式的請求便可

tips:

chrome devTools有時候會不提示options預請求的XHR？發送options預請求的很差驗證

查看詳細的http請求和響應的內容: curl -v www.baidu.com