在进行网络请求时，有时我们需要发送认证信息，例如 cookies、HTTP 认证或客户端 SSL 凭证。fetch() 方法的 credentials 属性允许我们控制这些认证信息是否被包含在请求中。
credentials 属性的作用
credentials 属性定义了请求是否应随附用户凭证，包括 cookies 和 HTTP 认证信息。该属性可以设置为以下三种值之一：
"omit"：不包含任何用户凭证。这是默认值。"same-origin"：仅当请求的目标源与当前页面的源相同时才包含凭证。"include"：无论请求目标源如何，都包含凭证。
设置 credentials 属性
为了使用 credentials 属性，我们需要在发起 fetch() 请求时指定它。下面是一个示例，展示了如何设置 credentials 属性：
fetch('https://example.com/data', {
method: 'GET',
credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));在这个例子中，我们向 https://example.com/data 发起一个 GET 请求，并明确指定了 credentials: 'include'。这意味着无论请求的目标源是什么，我们都将包含凭证。
credentials 属性与同源策略
credentials 属性特别需要注意的是同源策略的影响。如果你将 credentials 属性设置为 "same-origin" 或 "include"，那么请求只能成功地发送到同一源（即协议、主机和端口相同）的服务器上。如果目标 URL 不是同源的，则会抛出一个 TypeError 异常。
credentials 属性与 CORS
跨源资源共享（CORS）是一个安全机制，它限制了从不同源加载的文档或脚本如何与来自其他源的资源进行交互。使用 fetch() 发送带有用户凭证的请求时，需要确保服务器支持并正确配置了 CORS。
如果服务器希望接受包含用户凭证的跨源请求，它必须设置响应头 Access-Control-Allow-Credentials 为 true。例如：
Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Credentials: true
这里，Access-Control-Allow-Origin 必须是一个具体的源地址（不能是通配符 *），并且服务器必须设置 Access-Control-Allow-Credentials 头为 true。
使用场景示例
示例 1：使用 cookies 发送请求
假设你有一个网站，用户登录后需要访问另一个域上的资源。你可以通过设置 credentials 属性为 "include" 来发送包含 cookie 的请求：
fetch('https://api.example.com/resource', {
method: 'GET',
credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));示例 2：禁用凭证
有时候，你可能不想发送任何凭证信息，特别是在处理第三方 API 时。这时可以将 credentials 属性设置为 "omit"：
fetch('https://thirdpartyapi.com/data', {
method: 'GET',
credentials: 'omit'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));这样做的好处是提高了安全性，避免了不必要的凭证暴露风险。
总结
fetch() 方法的 credentials 属性提供了强大的功能，使开发者能够灵活地控制请求中的用户凭证。理解如何使用这个属性对于构建现代 Web 应用至关重要。无论是为了安全考虑还是为了实现特定的功能，正确地使用 credentials 属性都是必不可少的技能。