“通过 Set-Cookie 设置 cookie 的尝试被阻止”与反应

Question

我正在做一个小项目，用户在访问他们的个人资料之前使用他们的 email 和密码进行身份验证。 后端使用 cookies，这是在正确的 email 和密码提交给 auth API 时设置的。我创建了一个 axios 的实例来处理 api 调用，下面是它的外观：

// Step-1: Create a new Axios instance with a custom config.
// The timeout is set to 10s. If the request takes longer than
// that then the request will be aborted.
const customAxios = axios.create({
  ...apiConfig,
  timeout: 10000,
  withCredentials: true,
// custom headers can be added here as shown below
// headers: { 'api-key': 'eyJz-CI6Ikp-4pWY-lhdCI6' }
});

// Step-2: Create request, response & error handlers
const requestHandler = (request) => {
request.headers["Accept"] = "application/json";
request.headers["Content-Type"] = "application/json";
return request;
};

const errorHandler = (error) => {
  return Promise.reject(error);
};

customAxios.interceptors.request.use(
  (request) => requestHandler(request),
  (error) => errorHandler(error)
);

customAxios.interceptors.response.use(
 (response) => responseHandler(response),
 (error) => errorHandler(error) 
);

关键是，每当我尝试使用正确的凭据调用 auth API 时，它都会返回成功，但响应中的 Set-Cookie header 会发出警告，并且 cookies 未在浏览器中设置。 这是警告：

“使用 Set-Cookie 设置 cookie 的尝试被阻止，因为它具有“SameSite=Strict”属性，但来自跨站点响应，这不是对顶级导航的响应”

请记住，我正在端口 3000 上本地测试 API，而端点部署在使用 Chrome 的测试服务器上。

谢谢

Answer 1

听起来你的开发设置有两个不同的来源是问题所在（嘿，你的安全策略正在工作！）在开发模式下禁用SameSite=Strict ，或将其扩展为也接受来自localhost:3000 （API 域）的 cookies，而不是与前端服务的域相同。 还要确保这只会在开发设置中被禁用