跨域场景下Set-Cookie头异常：Cookie未被浏览器存储/发送求助

• 前端请求必须开启凭证携带
  React项目中，使用Axios或Fetch发起跨域请求时，必须明确开启凭证选项：

  • Axios写法：axios.post('/api/login', data, { withCredentials: true })
  • Fetch写法：fetch('/api/login', { method: 'POST', credentials: 'include', body: data })
    没有这个配置，浏览器会自动忽略跨域场景下的Set-Cookie响应。

• 核对Cookie的SameSite与Secure属性
  从截图看Cookie的SameSite设为None，这是跨域场景的正确配置，但必须同时搭配Secure属性（截图已满足）。如果后端只设置SameSite=None未加Secure，浏览器会直接拒绝存储该Cookie。

• 验证Domain属性配置
  截图中Cookie的Domain为localhost，若前端运行在localhost:3000、后端在localhost:8080，该配置是合法的，但注意Domain不能包含端口号，如果后端误写为localhost:8080会导致Cookie无法匹配域名。

• 后端CORS配置必须满足凭证要求
  后端的CORS响应头必须包含两项关键配置：

  1. Access-Control-Allow-Credentials: true
  2. Access-Control-Allow-Origin必须指定前端的具体域名（如http://localhost:3000），不能设为*，否则浏览器会阻断跨域Cookie的存储与携带。

• 排查浏览器隐私设置
  避免在无痕/隐私模式下测试，这类模式默认会限制第三方Cookie；同时检查浏览器是否开启了"阻止所有Cookie"或"阻止第三方Cookie"的设置，临时关闭后再测试。

• 线上环境需确保HTTPS协议
  带有Secure属性的Cookie仅在HTTPS环境下生效，localhost作为例外可在HTTP下正常工作，但部署到线上时，前后端必须都使用HTTPS，否则Cookie无法被存储。

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