Node.js项目Postman请求返回Cookie正常但浏览器端无Cookie问题求助

问题修复方案 #

你需要分别修改前端请求配置、服务端CORS配置、Cookie设置三部分代码：

1. 前端Axios请求添加凭证携带配置

跨域请求时浏览器默认不会携带和存储Cookie，需要在Axios请求中显式开启withCredentials: true：

export const login = async (email, password) => {
  try {
    const res = await axios({
      method: 'POST',
      url: 'http://127.0.0.1:3000/api/v1/users/login',
      data: { email, password },
      // 新增这一行
      withCredentials: true
    })

    if (res.data.status === 'success') {
      showAlert('success', 'Logged in successfully!')
      window.setTimeout(() => {
        location.assign('/')
      }, 1500)
    }
    console.log(res)
  } catch (err) {
    showAlert('error', err.response.data.message)
  }
}

如果全局发请求都需要带Cookie，也可以设置axios.defaults.withCredentials = true全局生效。

2. 服务端CORS配置指定允许的来源

浏览器规定跨域携带凭证时，CORS的origin不能使用通配符*，必须显式指定允许的前端域名：

app.use(
  cors({
    // 替换为你前端实际运行的地址，比如本地开发如果是8080端口就填http://127.0.0.1:8080
    origin: 'http://127.0.0.1:你的前端端口号',
    credentials: true,
  })
)

如果需要允许多个来源，可以用动态判断的写法：

const allowedOrigins = ['http://127.0.0.1:8080', 'http://localhost:8080']
app.use(
  cors({
    origin: (origin, callback) => {
      if (allowedOrigins.includes(origin) || !origin) {
        callback(null, true)
      } else {
        callback(new Error('Not allowed by CORS'))
      }
    },
    credentials: true
  })
)

3. 补充Cookie属性配置

根据你的运行环境补充Cookie的相关属性，避免浏览器拦截：

res.cookie('jwt', token, {
  expires: new Date(
    Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000
  ),
  httpOnly: true,
  // 开发环境http协议下可以设置为Lax，生产环境https下如果是跨站需要设为None并开启secure
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  secure: process.env.NODE_ENV === 'production',
  // 建议显式指定域名，和前后端访问的域名保持一致
  domain: '127.0.0.1',
  path: '/'
})

注意事项

• 前后端访问地址要保持一致，不要前端用localhost、后端接口用127.0.0.1，浏览器会判定为跨域，导致Cookie无法存储。
• 生产环境部署时如果使用了反向代理，需要确保代理配置也透传了Cookie相关的请求头和响应头。

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