乐闻世界logo
搜索文章和话题

How to set Cookies with CORS requests

2 个月前提问
2 个月前修改
浏览次数29

1个答案

1

在实现跨源资源共享(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的基本步骤和配置。这样的配置确保了你的应用可以在保证安全的前提下,跨域地处理用户数据。

2024年8月12日 14:14 回复

你的答案