在进行跨域请求时，如何正确处理 Cookies 成为一个需要特别注意的问题。Cookies 是存储用户身份验证信息的重要方式，因此确保正确的 Cookie 处理对于保持会话状态和维护用户隐私至关重要。
设置 Cookies 的可见性
SameSite 属性
SameSite 是一个用于控制浏览器如何发送 Cookies 的属性。它有三种值：Strict、Lax 和 None。
- Strict：这种设置下，只有当用户从同一站点发起请求时，才会发送 Cookies。这对于防止 CSRF 攻击非常有效，但会导致跨站请求失败。
- Lax：这是默认设置，也是较为平衡的选项。在这种设置下，Cookies 会在用户导航到同一站点时发送，例如通过点击链接。但是，跨站请求（如图片加载或 AJAX 请求）不会发送 Cookies。
- None：Cookies 在任何情况下都会被发送，无论请求是否跨站。但为了安全起见，必须同时设置
Secure属性。
Secure 属性
Secure 属性确保 Cookies 只能在 HTTPS 连接中发送。如果网站是通过 HTTP 提供服务，则即使设置了 Secure 属性，Cookies 也不会被发送。这有助于防止中间人攻击。
设置 Fetch 请求以发送 Cookies
设置 withCredentials 属性
要让 Fetch 请求发送 Cookies，需要在请求配置中设置 credentials 属性。这个属性必须设为 'include'，才能使 Fetch 请求携带 Cookies。
fetch('https://example.com/api/data', {
method: 'GET',
credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));示例：登录后获取用户数据
假设用户已经登录，并且服务器已经设置了必要的 Cookies。现在，我们需要通过 Fetch API 获取用户的个人数据。
// javascriptcn.com 代码示例
fetch('https://example.com/api/user/profile', {
method: 'GET',
credentials: 'include'
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('User profile:', data);
})
.catch(error => console.error('There has been a problem with your fetch operation:', error));处理跨域请求中的 Cookies
配置 CORS 策略
对于跨域请求，服务器需要正确配置 CORS（跨源资源共享）策略，允许发送 Cookies。这通常通过在响应头中添加 Access-Control-Allow-Credentials: true 来实现。
Access-Control-Allow-Origin: https://yourdomain.com Access-Control-Allow-Credentials: true
客户端配置
客户端的 Fetch 请求也必须设置 credentials 属性为 'include'，否则 Cookies 将不会被发送。
fetch('https://api.example.com/data', {
method: 'GET',
credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));总结
正确地使用 Fetch API 发送 Cookies 对于保持会话状态和确保用户安全至关重要。通过设置 credentials 属性并正确配置服务器端的 CORS 策略，可以确保在跨域请求中安全地发送和接收 Cookies。这不仅提升了用户体验，还增强了应用的安全性。