Fetch API - 憑據

在 Fetch API 中，cookie、授權標頭和 TLS 客戶端證書被稱為憑據。我們也可以說憑據是數字文件（例如密碼、使用者名稱、證書等），用於在向伺服器發出請求時確認使用者或客戶端的身份。

讓我們更詳細地瞭解一下這些憑據：

Cookie − 它們是 Web 瀏覽器儲存並與所有相同來源請求一起傳送的小資料塊。它用於儲存會話資訊、常用資料等。它們還控制其會話、範圍和可訪問性。Cookie 也由伺服器在 Set-Cookie 標頭的幫助下發送。

授權標頭 − 這些包括包含身份驗證資訊（如密碼、使用者名稱、金鑰等）的 HTTP 標頭。授權標頭用於實現各種身份驗證方案，並透過各種方法（如雜湊、加密等）由伺服器驗證。

TLS 客戶端證書 − 它們是由認證機構提供的並安裝在客戶端裝置上的數字證書。它們用於在藉助傳輸層安全與伺服器建立安全連線時提供客戶端的身份證明。

憑據屬性

credentials 屬性控制是否在跨域請求中傳送 cookie 和其他憑據證書。它是 fetch() 函式中的一個可選屬性。

語法

fetch(resourceURL, {credentials:"include"})

此屬性可以具有以下三個值之一：

omit − 當 credentials 屬性的值設定為 omit 時，這意味著瀏覽器將從請求中刪除所有憑據，並忽略響應中傳送的憑據。

same-origin − 當 credentials 屬性的值設定為 same-origin 時，這意味著瀏覽器將在對與請求頁面相同來源的請求中包含憑據。並且只使用來自相同來源 URL 的憑據。這是此屬性的預設值。

include − 當 credentials 屬性的值設定為 include 時，這意味著瀏覽器將在相同來源和跨域請求中包含憑據，並且始終使用響應中傳送的憑據。

示例 1

在下面的程式中，我們使用 fetch() 函式向給定的 URL 發出請求。在這裡，我們將 credentials 屬性設定為“include”值，這意味著跨域和同域憑據都包含在請求中。在向伺服器傳送請求後，我們現在使用 then() 函式來處理響應。如果遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using a GET request 
   fetch("https://jsonplaceholder.typicode.com/todos/21", {
      // Sending both same-origin and 
      // cross-origin credentials
      credentials: "include"
   })
   // Converting received data into text
   .then(response => response.text())
   .then(myData => {
      // Display the retrieve Data
      console.log(myData);
   })    
   .catch(err=>{
      // Cach error if occur
      console.log("Found Error:", err)
   });
</script>
<h2>Fetch API Example</h2>
</body>
</html>

輸出

示例 2

在下面的程式中，我們使用 fetch() 函式向給定的 URL 發出請求。在這裡，我們將 credentials 屬性設定為“same-origin”值，這意味著憑據僅包含在對相同來源或域的請求中。在向伺服器傳送請求後，我們現在使用 then() 函式來處理響應。如果遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using a GET request 
   fetch("https://jsonplaceholder.typicode.com/todos/21", {
      // Sending credentials only for the same domain request
      credentials: "same-origin"
   })

   // Converting received data into text
   .then(response => response.text())
   .then(myData => {
      // Display the retrieve Data
      console.log(myData);
   })    
   .catch(err=>{
      // Cach error if occur
      console.log("Found Error:", err)
   });
</script>
<h2>Fetch API Example</h2>
</body>
</html>

輸出

結論

因此，使用憑據，我們可以控制如何在請求中傳送憑據或如何處理響應中返回的憑據。credentials 屬性僅影響跨域請求，對於同域請求，瀏覽器會自動將憑據新增到請求中。在下一篇文章中，我們將學習如何在 Fetch API 中傳送 GET 請求。

列印頁面