How to set Cookies with CORS requests

在实现跨源资源共享（CORS）的过程中，设置和发送Cookie是一个必须特别注意的步骤，因为它涉及到安全问题和用户隐私。要在CORS请求中成功设置Cookie，需要在客户端和服务器端都进行一些配置。

客户端配置

在客户端，当你发送一个CORS请求，比如使用 fetch API时，你需要在请求中指定 credentials 选项。这个选项告诉浏览器如何处理跨源请求中的Cookie。它有三个可能的值：

• omit：默认值，不会将Cookie随请求发送，也不会将第三方Cookie包含在响应中。
• same-origin：只有当URL是同源时，才会发送Cookie。
• include：无论是不是跨源请求，都会发送Cookie。

例如，如果你想在跨源请求中包含Cookie，你应该将 credentials 设置为 include：

javascript
fetch("https://example.com/data", {
  method: "GET",
  credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

服务器端配置

在服务器端，你需要设置响应头，来允许特定的跨源请求携带Cookie。这主要通过设置 Access-Control-Allow-Credentials 头部为 true 并且明确指定 Access-Control-Allow-Origin（不能使用通配符 *）来实现：

http
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://yourwebsite.com

此外，当设置Cookie时，你可能还需要配置Cookie的 SameSite 属性。在跨站请求中，将 SameSite 设置为 None 可以让Cookie被发送，但必须同时设置 Secure 属性，以确保Cookie仅通过安全的HTTPS连接发送。

http
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; SameSite=None; Secure

实际例子

假设你正在开发一个多域名下的应用，比如 example.com 下的API需要被 example-client.com 访问并处理Cookie。服务器端需要适当设置CORS头部，以接受来自 example-client.com 的请求，并处理Cookie。客户端需要在发出请求时，标明希望包含凭证（例如Cookie）。

以上就是在CORS请求中设置和发送Cookie的基本步骤和配置。这样的配置确保了你的应用可以在保证安全的前提下，跨域地处理用户数据。