Express后端配合React前端无法在浏览器中正常设置cookie问题求助

你遇到的Cookie无法保存问题可以按照以下优先级逐一排查修复：

• 修复axios配置的拼写错误
  你当前写的axios.defaults.withcredentials = true属性名拼写错误，正确的跨域带凭证属性是驼峰格式withCredentials，C必须大写，错误的拼写会导致axios不会携带跨域凭证，也不会处理响应返回的Set-Cookie头。
  修正为：

  axios.defaults.withCredentials = true
  

• 调整Cookie的secure配置适配本地开发环境
  你当前Cookie配置的secure: true要求浏览器仅在HTTPS协议的请求下才会保存、发送该Cookie，而你本地前端运行在http://localhost:3000的HTTP协议下，自然无法保存。可以根据环境动态配置secure属性：

  res.cookie('token',token,{
    httpOnly:true,
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
    secure: process.env.NODE_ENV === 'production',
  });
  

  生产环境部署HTTPS后，该配置会自动开启secure和sameSite:none，本地开发时使用宽松配置适配HTTP环境。
• 修正响应JSON的语法错误
  你当前的返回代码存在语法问题，缺少JSON对象的大括号包裹，会导致响应异常，打断Cookie的后续处理流程，修正为：

  res.status(201).json({"status":"Success","message":"authenticated"})
  

• 可选优化CORS配置
  本地排查阶段可以临时将origin设置为true，允许所有请求源携带凭证，确认问题后再固定白名单：

  app.use(cors({
    credentials:true,
    origin: true
  }))
  

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