本地跨端口部署Cookie无法设置，该如何解决？

1. 为本地服务启用HTTPS（自签名证书） #

由于SameSite=None强制要求Cookie带有Secure属性（仅HTTPS环境生效），给本地前后端服务配置HTTPS是最合规的解决方案：

• 用mkcert工具生成可信的自签名证书（避免浏览器安全警告），安装后执行mkcert localhost生成证书文件。
• 前端（以Vite为例）在vite.config.js中开启HTTPS：

  export default {
    server: {
      https: {
        key: './localhost-key.pem',
        cert: './localhost.pem'
      }
    }
  }
  

• 后端（以Express为例）用HTTPS模块启动服务：

  const https = require('https');
  const fs = require('fs');
  const express = require('express');
  const app = express();
  
  const options = {
    key: fs.readFileSync('./localhost-key.pem'),
    cert: fs.readFileSync('./localhost.pem')
  };
  
  https.createServer(options, app).listen(3000);
  

• 最后修改后端的Set-Cookie响应头，添加Secure属性：Set-Cookie: connect.sid=MYSECRETCOOKIE_123455; Path=/; Expires=Mon, 19 Feb 2024 00:50:59 GMT; HttpOnly; SameSite=None; Secure

2. 临时调整浏览器安全策略 #

Chrome #

启动Chrome时添加命令行参数，禁用跨域安全限制：

chrome --disable-web-security --user-data-dir=/tmp/chrome-test-session

注意：使用独立的用户数据目录（如/tmp/chrome-test-session）避免影响正常浏览器会话，仅用于测试。

Firefox #

在地址栏输入about:config，修改以下配置项：

• 将network.cookie.sameSite.noneRequiresSecure设为false
• 将network.cookie.sameSite.laxByDefault设为false
  修改后重启Firefox，即可在HTTP环境下接受SameSite=None且无Secure的Cookie。

3. 用反向代理统一域名 #

通过反向代理将前后端服务映射到同一域名的不同路径，消除跨域场景：
以Vite的内置代理为例，在vite.config.js中配置：

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

此时前端请求后端接口时，直接调用/api/xxx，浏览器会认为是同域请求，后端设置Cookie时无需SameSite=None和Secure（HTTP环境下），Cookie可正常存储和携带。

4. 映射同主域的子域名 #

修改本地hosts文件（Windows为C:\Windows\System32\drivers\etc\hosts，Mac/Linux为/etc/hosts），添加以下映射：

127.0.0.1 frontend.localhost
127.0.0.1 backend.localhost

• 配置前端服务绑定frontend.localhost:5173，后端服务绑定backend.localhost:3000
• 后端设置Cookie时指定Domain为.localhost：Set-Cookie: connect.sid=MYSECRETCOOKIE_123455; Path=/; Expires=Mon, 19 Feb 2024 00:50:59 GMT; HttpOnly; SameSite=Lax; Domain=.localhost
  浏览器会识别两个子域属于同主域，Cookie可正常跨子域传递，且无需HTTPS。

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