React+Vite无法获取Cookie但CRA正常？原因及域名影响问询

我用NestJS搭建后端，前端分别基于CRA和Vite创建React项目，向后端发起GET请求时出现差异：

• CRA创建的项目（默认运行在localhost）能正常让浏览器设置Cookie
• Vite创建的项目（默认运行在http://127.0.0.1:5173/）浏览器中完全看不到生成的Cookie

想确认原因是否是CRA用localhost、Vite用127.0.0.1，导致Cookie仅支持localhost？

核心原因：域名/IP的同源差异与Cookie绑定规则 #

• 浏览器会把localhost和127.0.0.1视为完全独立的源，哪怕它们指向同一台机器，也会被当作两个不同域名处理。
• 如果NestJS后端设置Cookie时指定了Domain: localhost，这个Cookie只会被绑定到localhost域名下的页面，127.0.0.1的页面自然无法读取或保存它。
• CRA默认用localhost启动开发服务，Vite默认用127.0.0.1，这就是两者表现不同的核心触发点。

其他可能的影响因素 #

• SameSite属性限制：如果后端设置了SameSite=Strict，且前后端源不一致，浏览器会直接拒绝保存Cookie。
• 请求凭证配置缺失：不管用CRA还是Vite，发起请求时必须开启凭证携带（withCredentials: true或credentials: 'include'），否则浏览器不会处理Cookie。
• Vite代理配置错误：如果Vite未正确配置跨域代理，请求会被判定为跨域，导致Cookie无法被浏览器留存。

解决办法 #

1. 修改Vite启动地址为localhost
   在vite.config.js中配置server.host：

   export default defineConfig({
     server: {
       host: 'localhost'
     }
   })
   

   启动后Vite会使用localhost:5173，和CRA域名一致，后端绑定localhost的Cookie就能正常生效。

2. 调整后端Cookie的Domain属性
   若需要兼容localhost和127.0.0.1，可以不指定Domain（让浏览器自动匹配当前请求的域名），或者设置为兼容值。NestJS示例：

   res.cookie('token', 'xxx', {
     domain: '', // 不指定Domain，浏览器自动适配请求来源
     httpOnly: true,
     secure: process.env.NODE_ENV === 'production',
     sameSite: 'lax'
   });
   

3. 确保请求配置携带凭证

   • 使用fetch时：

     fetch('http://your-backend/api', {
       credentials: 'include'
     });
     

   • 使用axios时：

     axios.get('http://your-backend/api', {
       withCredentials: true
     });
     

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