HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Fetch API - 凭据

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

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

Cookies − 它们是由网络浏览器存储的小数据块，并与所有相同来源的请求一起发送。 它用于存储会话信息、常用数据等。它们还控制其会话、范围和可访问性。 服务器也借助 Set-Cookie 标头发送 Cookie。

授权标头 − 其中包括包含密码、用户名、密钥等身份验证信息的 HTTP 标头。授权标头用于实现各种身份验证模式，并且服务器还使用散列、加密等各种方法进行验证。

TLS 客户端证书 − 它们是由认证机构提供并安装在客户端设备上的数字证书。 它们用于提供客户端的身份证明，同时借助传输层安全性创建与服务器的安全连接。

credentials 属性

credentials 属性控制是否在跨源请求中发送 cookie 和其他凭证。 它是 fetch() 函数中的可选属性。

语法

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

This property can have one value out of the following three values −

omit(省略) − 当凭据属性的值设置为omit(省略)时，这意味着浏览器将从请求中删除所有凭据，并忽略响应中发送的凭据。

same-origin(同源) − 当凭据属性的值设置为same-origin(同源)时，这意味着浏览器将在与请求页面同源发出的请求中包含凭据。 并且仅使用来自相同源 URL 的凭据。 这是该属性的默认值。

include − 当凭据属性的值设置为 include 时，这意味着浏览器将在同源和跨源请求中包含凭据，并始终使用在响应中发送的这些凭据。

示例 1

在下面的程序中，我们使用 fetch() 函数向给定的 URL 发出请求。 在这里，我们将凭证属性设置为"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 发出请求。 在这里，我们将凭证属性设置为"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 凭证

结论

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

❮ 上一节 下一节 ❯