本地跨端口Fetch请求未携带Cookie问题求助

问题背景 #

本地环境下，前端运行在api-v3-dev:5177，后端在api-v3-dev:3000，已配置hosts和端口转发，CORS动态设置Access-Control-Allow-Origin为请求源且返回Access-Control-Allow-Credentials: true。登录后后端返回的Cookie包含HttpOnly; SameSite=Lax，但使用credentials: 'include'的Fetch请求仍无法携带该Cookie。

关键原因与解决步骤 #

1. 浏览器站点判定规则的影响 #

现代浏览器（Chrome、Firefox等）的同站点判定包含端口——同域名不同端口会被视为两个独立站点。而SameSite=Lax的Cookie仅会在同站点的GET请求中自动携带，跨站点请求（哪怕只是端口不同）不会自动带上。

2. 修复Cookie的Domain配置 #

你当前的Set-Cookie头未指定Domain，浏览器会默认把Cookie绑定到api-v3-dev:3000（含端口），前端api-v3-dev:5177属于不同站点，自然无法共享。

修改后端的Set-Cookie头，显式指定不带端口的域名：

set-cookie: token=eyJoZTUiLCJpZCI6; HttpOnly; Domain=api-v3-dev; SameSite=Lax

这会让Cookie绑定到api-v3-dev这个域名，而非具体端口，同域名下的不同端口服务就能共享该Cookie。

3. 本地开发的快速调试方案 #

如果不想改后端配置，还有两种快速解决方式：

• 前端代理转发：利用前端开发服务器的代理功能，将后端请求转发到同端口。比如Vite项目在vite.config.js中配置：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://api-v3-dev:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

之后前端请求改为fetch('/api/whoami', { credentials: 'include' })，浏览器会认为是同端口请求，自动携带Cookie。

• 禁用浏览器SameSite检查：启动Chrome时添加启动参数，临时关闭SameSite的强制校验：

chrome.exe --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure

注意：这仅适合本地调试，不要用于日常浏览。

4. 清理CORS配置冗余项 #

你的Access-Control-Allow-Headers里包含Set-Cookie和Cookie，这两个是浏览器自动处理的头，不需要手动配置，去掉也不影响功能，还能减少混淆。

总结 #

核心问题是浏览器把同域名不同端口判定为不同站点，导致SameSite=Lax的Cookie无法跨端口携带。通过指定Cookie的Domain属性、前端代理转发或临时禁用浏览器校验，都能解决这个本地开发的问题。

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