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 请求。

打印页面