Ajax 简明教程
Fetch API - Credentials
在 Fetch API 中，Cookie、授权标头和 TLS 客户端证书称为凭据。我们还可以说凭据是数字文档（如密码、用户名、证书等），用于确认用户或客户端在向服务器发出请求时的身份。
让我们在下面更详细地了解这些凭据 −
Cookies − 它们是由 Web 浏览器存储并随所有相同来源请求发送的小块数据。它用于存储会话信息、经常使用的数据等。它们还控制他们的会话、范围和可访问性。Cookie 也由服务器借助 Set-Cookie 标头发送。
Authorization Headers − 这些包括包含身份验证信息（如密码、用户名、密钥等）的那些 HTTP 标头。授权标头用于实现各种授权架构，服务器也会使用散列、加密等各种方法对其进行验证。
TLS Client Certificates − 它们是认证机构提供的数字证书，也安装在客户端设备上。它们用于在使用传输层安全性的情况下创建与服务器的安全连接时提供客户端的身份证明。
Syntax
fetch(resourceURL, {credentials:"include"})此属性可以具有以下三个值中的一个值 −
omit − 当 credentials 属性的值设置为 omit 时，表示浏览器将从请求中删除所有凭据，并忽略响应中发送的凭据。
same-origin − 当 credentials 属性的值设置为 same-origin 时，表示浏览器将凭据包含在向请求页面相同来源发出的那些请求中。并且只使用来自相同来源 URL 的那些凭据。这是此属性的默认值。
include − 当 credentials 属性的值设置为 include 时，表示浏览器将在同源请求和跨源请求中同时包含凭据，并且始终使用响应中发送的那些凭据。
Example 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>
Example 2
在以下程序中，我们使用 fetch() 函数对给定的 URL 发出请求。此处我们将 credentials 属性设置为 “same-oigin” 值，这意味着凭据仅包含在发往同一 source 或域的请求中。在向服务器发送请求后，现在我们使用 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>