fetch 跨域請求

CORS

cors是"Cross-Origin Resource Sharing"的簡稱，是實現跨域的一種方式，相對於其餘跨域方式，比較靈活，並且不限制發請求使用的method，如下從幾種狀況分析cors使用。

GET跨域請求

• 前端代碼

  fetch('http://localhost:6888/test_get',{
      method: 'GET',
      mode: 'cors',
  }).then(res => {
      return res.json();
  }).then(json => {
      console.log('獲取的結果', json.data);
      return json;
  }).catch(err => {
      console.log('請求錯誤', err);
  })

• 後端代碼相關配置

  c.Header("Access-Control-Allow-Origin", "*")
  c.Header("Access-Control-Allow-Methods", "GET, POST")

• 響應(response)頭部特殊部分

  

POST跨域請求

• 前端代碼

  fetch('http://localhost:6888/test_post',{
      method: 'POST',
      body: JSON.stringify({name: 'zaozuo'}),
      mode: 'cors',
  }).then(res => {
      return res.json();
  }).then(json => {
      console.log('獲取的結果', json.data);
      return json;
  }).catch(err => {
      console.log('請求錯誤', err);
  })

• 後端代碼同get相同
• 響應(response)頭部特殊部分同get相同

PUT跨域請求

• 前端代碼

  fetch('http://localhost:6888/test_put',{
      method: 'PUT',
      body: JSON.stringify({name: 'zaozuo'}),
      mode: 'cors',
  }).then(res => {
      return res.json();
  }).then(json => {
      console.log('獲取的結果', json.data);
      return json;
  }).catch(err => {
      console.log('請求錯誤', err);
  })

• 後端代碼同get、post相同
• 請求(request)頭部特殊部分
  
• 響應(response)頭部特殊部分

• 不一樣於get、post請求的地方是請求有個預檢查（OPTIONS請求），而後再發put請求；上面的頭部信息都是options請求相關的，put請求跟平時普通http請求同樣。

思考

1. 同是跨域請求，爲何put有預檢查，而get和post都沒有
2. 上面提到的跨域頭部信息的值都是幹什麼的，還有沒有其餘特殊頭可能用到

問題一

跨域請求分簡單請求和非簡單請求，簡單請求跨域只發送一個請求，不會發送options請求進行預檢查，而非簡單請求有預檢查，那什麼是簡單請求，什麼又是非簡單請求呢。

• 簡單請求（知足如下一種狀況便可）

1. 請求method是get、head或者post
2. 除了用戶代理自動設置的一些頭部，開發工程師手動設置的頭部是以下頭部之一：
   Accept
   Accept-Language
   Content-Language
   Content-Type
   Last-Event-ID
   DPR
   Save-Data
   Viewport-Width
   Width
3. content-type是application/x-www-form-urlencoded、 multipart/form-data或者text/plain
4. 沒有事件註冊到XMLHttpRequestUpload上
5. 在請求時沒有使用ReadableStream

• 非簡單請求
  不是簡單請求，就是非簡單請求嘍。

問題二

• request跨域頭部介紹

  • Access-Control-Allow-Origin：能夠容許哪些客戶端來訪問，指能夠是*，也能夠是某個域名或者用逗號隔開的域名列表。
  • Access-Control-Expose-Headers： 瀏覽器能夠訪問的一些頭部。
  • Access-Control-Max-Age：預檢查結果能夠緩存的問題
  • Access-Control-Allow-Methods：指定客戶端發請求能夠使用的方法
  • Access-Control-Allow-Headers：指定客戶端發請求能夠使用的頭部。
  • Access-Control-Allow-Credentials: 指定客戶端是否能夠攜帶cookie等認證信息(前端fetch設置withCredentials：true進行發送cookie),若是是簡單請求等跨域得確保此response頭設置爲true。

• response頭部

  • Access-Control-Allow-Origin：能夠容許哪些客戶端來訪問，指能夠是*，也能夠是某個域名或者用逗號隔開的域名列表。
  • Access-Control-Expose-Headers： 瀏覽器能夠訪問的一些頭部。
  • Access-Control-Max-Age：預檢查結果能夠緩存的問題
  • Access-Control-Allow-Methods：指定客戶端發請求能夠使用的方法
  • Access-Control-Allow-Headers：指定客戶端發請求能夠使用的頭部。
  • Access-Control-Allow-Credentials: 指定客戶端是否能夠攜帶cookie等認證信息(前端fetch設置withCredentials：true進行發送cookie),若是是簡單請求等跨域得確保此response頭設置爲true。

總結

以上提到的頭部信息，大部分只在預檢查部分出現。