React对接Frappe/ERP Next时无法从响应头获取sid

我正尝试从响应头中获取session id（sid）。我的客户端应用运行在本地环境，API部署在ERP Next服务器上。从React应用发送登录请求后能收到响应，但代码中无法找到包含sid的set-cookie字段，仅在网络面板的响应头区域可见。这可能是什么问题？是否与CORS策略或SameSite属性有关？

代码示例：

export const loginUser = createAsyncThunk("user/login", async () => {
  try {
    const response = await fetch(
      `${base_url}/api/method/login?usr=username&pwd=password`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          usr: "username",
          pwd: "password",
        }),
      }
    );

    if (!response.ok) {
      throw new Error("Login failed");
    }
    const data = await response.json();
    const headersObj = Object.fromEntries(response.headers.entries());
    console.log("Response headers:", headersObj);
    return data;
  } catch (error) {
    console.error("Error during login:", error);
    throw error;
  }
});

这种情况大概率和CORS配置以及Cookie的HttpOnly/SameSite属性有关，具体原因和解决办法如下：

1. Cookie的HttpOnly属性限制 #

如果ERP Next返回的sid Cookie带有HttpOnly标记，浏览器会禁止前端JavaScript代码直接访问这个Cookie——这是浏览器的安全机制，目的是防止XSS攻击窃取会话凭证。这种情况下，代码里拿不到set-cookie字段但网络面板能看到，完全符合这个特征。

• 解决办法：不需要手动获取sid，后续请求浏览器会自动携带这个Cookie（满足跨域条件即可）。如果业务逻辑必须在前端拿到sid，需要修改ERP Next的Cookie配置去掉HttpOnly标记，但这会降低安全性，不推荐。

2. CORS响应头配置缺失 #

浏览器允许前端访问响应头的前提是，服务器在CORS响应头中明确声明了允许暴露的头字段。Set-Cookie属于特殊头，默认不会被暴露给前端代码，除非服务器配置了正确的CORS规则：

• 服务器需要返回Access-Control-Allow-Credentials: true
• 服务器的Access-Control-Allow-Origin不能设为*，必须指定你的前端域名（比如http://localhost:3000）
• 同时你的Fetch请求必须加上credentials: 'include'（跨域场景必须用这个值）

修改你的Fetch请求代码 #

在请求配置里新增credentials: 'include'：

const response = await fetch(
  `${base_url}/api/method/login?usr=username&pwd=password`,
  {
    method: "POST",
    credentials: 'include', // 新增这一行
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      usr: "username",
      pwd: "password",
    }),
  }
);

3. SameSite属性的影响 #

如果Cookie的SameSite属性设为Strict或Lax，在跨域请求场景下，浏览器可能不会将Cookie暴露给前端代码，也不会在后续请求中自动携带。这种情况需要服务器将SameSite设为None，同时必须搭配Secure属性（仅HTTPS环境生效）；如果是本地HTTP环境测试，可能需要调整浏览器安全设置绕过，但生产环境必须用HTTPS。

总结 #

优先检查：

• 给Fetch请求加上credentials: 'include'
• 确认ERP Next服务器配置了Access-Control-Allow-Credentials: true和正确的Access-Control-Allow-Origin
• 如果必须获取sid，确认Cookie没有HttpOnly标记（不推荐）

内容的提问来源于stack exchange，提问作者Bhavishya Negi