为什么我无法从跨源 API 响应设置 Cookie？

跨源 HTTP Cookie 管理：解决标头问题

在 Web 开发中，从跨源响应设置和检索 HTTP cookie 可以是一个挑战。当您的前端应用程序与来自不同域的后端 API 进行通信时，就会出现这种情况。

该问题源于现代浏览器强制执行的同源策略，该策略限制对来自不同域的资源的访问不同的起源。当发出跨源请求时，浏览器通常会拒绝响应响应中的 Set-Cookie 标头，从而阻止 cookie 存储在本地。

场景

考虑这种特定情况，前端应用程序需要设置刷新令牌以进行身份​​验证。后端 API 正在按预期发送 Set-Cookie 标头，但前端无法接收并保存它。

Axios 请求配置

代码用于从前端发送请求的提供包括 headers 对象中的 withCredentials 属性。这不是该酒店的正确位置。 withCredentials 应该设置为 axios 实例本身的属性，而不是标头。

// Incorrect (Sets withCredentials as a request header)
const axiosAuth = axios.create({
  ...
  headers: {
    withCredentials: true,
  },
  ...
});

// Correct (Sets withCredentials as a property of the instance)
const axiosAuth = axios.create({
  ...
  withCredentials: true,
  ...
});

解决方案

通过将 withCredentials 移动为属性axios 实例的，而不是标头，浏览器将正确遵守跨域响应中的 Set-Cookie 标头，并将 cookie 存储在本地。这允许前端应用程序随后在后续请求中将 cookie 发送到 API 以进行身份​​验证。

以上是为什么我无法从跨源 API 响应设置 Cookie？的详细内容。更多信息请关注PHP中文网其他相关文章！