Fetch API - 凭证

在 Fetch API 中，Cookie、授权标头和 TLS 客户端证书称为凭据。我们也可以说 as 凭证是数字文档（如密码、用户名、证书等），它们在向服务器发出请求时确认用户或客户端的身份。

让我们在下面更详细地了解这些凭证 -

Cookie − 它们是由 Web 浏览器存储并与所有相同来源请求一起发送的小块数据。它用于存储会话信息、常用数据等。他们还控制其会话、范围和可访问性。Cookie 也由服务器在 Set-Cookie 标头的帮助下发送。
授权Headers - 这些 Headers 包括包含身份验证信息（如密码、用户名、密钥等）的 HTTP 标头。授权Headers 用于实现各种身份验证架构，并且还由服务器使用各种方法（如哈希、加密等）进行验证。
TLS 客户端证书 - 它们是由认证机构提供的数字证书，也安装在客户端的设备上。它们用于提供客户端的身份证明，同时在传输层安全性的帮助下与服务器建立安全连接。

Credentials 属性

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>

输出

API 凭证

示例 2

在下面的程序中，我们使用 fetch（）函数向给定的 URL 发出请求。在这里，我们将 credentials 属性设置为 “same-oigin” 值，这意味着凭证仅包含在对同一源或域发出的请求中。将请求发送到服务器后，我们现在使用 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>

输出

API 凭证

结论

因此，使用凭证，我们可以控制凭证在请求中的发送方式，或者如何处理响应中发回的凭证。credentials 属性仅影响跨域请求，对于同源请求，浏览器会自动将凭证添加到请求中。现在在下一篇文章中，我们将学习如何在 Fetch API 中发送 GET 请求。

打印本页