跨域场景下Set-Cookie设置失败及CORS问题求助

核心问题现象 #

出现Set-Cookie未存储问题，伴随多类浏览器错误，同时存在CORS跨域拦截：

• Set-Cookie was blocked because its Domain attribute was invalid with regards to the current host url
• Access to XMLHttpRequest at 'https://need-romance.site/auth/login' from origin 'http://localhost:3000/' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'localhost:3000' that is not equal to the supplied origin.
• This attempt to set a cookie via a Set-Cookie header was blocked because it had the "SameSite=Lax" attribute but came from a cross-site response which was not the response to a top-level navigation.

服务端响应头信息：

access-control-allow-origin: http://localhost:3000
content-length: 299
content-type: application/json; charset=utf-8
date: Mon, 01 May 2023 11:35:51 GMT
etag: W/"12b-8efK5dxnadj10qqm+FsB8wLDLFE"
set-cookie: refreshToken=eyJhbGci0iJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1YTk3NzgxZC05ZWQ4LTQxZTItOThhNi03ZmMzNTg0MTNjNTUiLCJpYXQiOjE2MDI5NDA5NTESIMV4CCI6MTY4NDE1MDU1MX0.avIPao2AXowDOKHYG0Ft2WiSg@cASgxZePqaP5xF0sw; Domain=localhost; Path=/; HttpOnly; SameSite=Lax
vary: Origin
x-powered-by: Express

环境信息 #

• 服务端地址：https://abcd.site
• 前端地址：http://localhost:3000（未部署，HTTP环境）

已尝试操作 #

1. 因前端为HTTP环境，未使用SameSite=None及Secure选项
2. 配置Next.js重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: { emotion: true },
  async rewrites() {
    return [
      {
        source: "/:path*",
        destination: "https://need-romance.site/:path*",
      },
    ];
  },
};

module.exports = nextConfig;

3. 前端登录请求代码（带withCredentials: true）：

export const login = async (email: string, password: string) => {
  try {
    const response = await axios({
      method: "post",
      url: URL + "/auth/login",
      data: {
        email,
        password,
      },
      withCredentials: true,
      headers: {
        "Cache-Control": "no-cache",
      },
    });

    return response.data;
  } catch (error) {
    console.log(error);
  }
};

4. 移除withCredentials后警告消失，但Cookie仍无法存储；此前HTTP环境下功能正常。

解决步骤 #

1. 修复Domain属性错误 #

浏览器会把显式设置Domain=localhost判定为无效（localhost属于特殊域名，不属于顶级域名范畴）：

• 修改服务端Set-Cookie配置，移除Domain=localhost，最终格式应为：

  refreshToken=xxx; Path=/; HttpOnly; SameSite=Lax
  

2. 修正CORS配置 #

当前CORS错误源于Access-Control-Allow-Origin值不匹配，且缺少凭证允许头：

• 服务端需将Access-Control-Allow-Origin设置为完整的http://localhost:3000，而非缺少协议的localhost:3000
• 因为前端请求带withCredentials: true，服务端必须添加Access-Control-Allow-Credentials: true响应头，否则浏览器会拒绝接收Cookie

3. 调整Next.js重写规则的使用 #

当前重写规则未生效，前端仍直接跨域请求服务端：

• 前端请求URL改为相对路径，比如/auth/login，而非拼接外部域名，让Next.js自动完成重写：

  export const login = async (email: string, password: string) => {
    try {
      const response = await axios({
        method: "post",
        url: "/auth/login", // 改为相对路径
        data: {
          email,
          password,
        },
        withCredentials: true,
        headers: {
          "Cache-Control": "no-cache",
        },
      });
  
      return response.data;
    } catch (error) {
      console.log(error);
    }
  };
  

• 确保重写规则中的目标地址和实际服务端地址https://abcd.site一致，避免域名混淆

4. 处理SameSite属性兼容 #

HTTP环境下无法使用SameSite=None; Secure，但跨域请求中SameSite=Lax会被拦截：

• 开发环境可临时调整浏览器设置绕过限制（仅用于开发）：
  • Chrome：地址栏输入chrome://flags/#same-site-by-default-cookies，设置为Disabled后重启
  • Firefox：地址栏输入about:config，搜索network.cookie.sameSite.laxByDefault，设置为false
• 生产环境部署后，必须将服务端改为HTTPS，并把Set-Cookie配置为SameSite=None; Secure; HttpOnly; Path=/

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