“通過 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，而不是與前端服務的域相同。 還要確保這只會在開發設置中被禁用