fetch解讀

Fetch API 提供了一個 JavaScript 接口，用於訪問和操縱 HTTP 管道的一些具體部分，例如請求和響應。它還提供了一個全局 fetch() 方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取資源。這種功能以前是使用 XMLHttpRequest 實現的。Fetch 提供了一個更理想的替代方案，可以很容易地被其他技術使用，例如Service Workers。

[問題]fetch請求中的跨域和攜帶Cookies問題

在有些請求中會遇到希望通過請求來訪問不同源的api，並且希望攜帶cookies。

解決跨域問題

fetch可以設置不同的模式使得請求有效. 模式可在fetch方法的第二個參數對象中定義.

fetch(url, {mode: 'cors'});

可以定義的模式如下：

• same-origin:表示同源可以進行訪問，反之瀏覽器拒絕
• cors: 表示同源和帶有cors響應頭的跨域可以請求成功，其他拒絕
• cors-with-forced-preflight: 表示在發出請求前, 將執行preflight檢查.
• no-cors: 表示跨域請求不帶cors響應頭場景，此時的相應類型為opaque，但是在opaque的返回類型中，我們幾乎不能查看到任何有價值的信息，比如不能查看response, status, url。

解決跨域攜帶cookies問題

跨域請求中需要帶有cookie時, 可在fetch方法的第二個參數對象中添加credentials屬性, 並將值設置為”include”.

fetch(url,{
  credentials: 'include'
});

除此之外, credentials 還可以取以下值:

• omit: 缺省值, 默認為該值.
• same-origin: 同源, 表示同域請求才發送cookie.

但是同時需要目標服務器可以接受接受跨域發送cookies請求，否則會被瀏覽器的同源策略阻擋
服務器端需要支持Access-Control-Allow-Credentials策略,服務器同時設置Access-Control-Allow-Credentials響應頭為"true"， 即可允許跨域請求攜帶 Cookie。

歡迎訪問我的個人博客ximikang.icu