使用Kong网关设置HttpOnly Cookie后前端无法查看的问题排查

我有一个后端服务，包含管理员登录时设置HttpOnly Cookie的接口，相关代码如下：

后端设置Cookie代码 #

// Set the cookie
response.cookie("refreshToken", refreshToken, {
    maxAge: 3.154e10,
    httpOnly: true,
});

response.send(this.UtilsInstance.sendOutput(message.Success, {
    accessToken : accessToken,
    username : removePasswordFromAdminData.username,
    role : removePasswordFromAdminData.role
}));

前端请求代码 #

await axios
.post('http://my_url/auth/v1/admin/login/',
    {
        'username': username.value,
        'password': password.value
    }, {
        withCredentials: true
    }
);

Kong CORS配置（kong.yaml） #

plugins:
   - name: cors
     route: auth-routes
     config:
        origins:
        - http://localhost:3000
        methods:
        - GET
        - POST
        - PUT
        - DELETE
        headers:
        - Accept
        - Accept-Version
        - Authorization
        - Content-Length
        - Content-MD5
        - Content-Type
        - Date
        - X-Auth-Token
        exposed_headers:
        - X-Auth-Token
        credentials: true
        max_age: 3600
        preflight_continue: false

代码运行无报错且能正常获取响应，但调用API后在开发者工具中无法查看该HttpOnly Cookie，请问遗漏了什么配置或步骤？

以下是按优先级排序的排查点及修复方案：

1. 缺失Cookie的SameSite属性配置 #

现代浏览器默认将未指定SameSite的Cookie归为Lax模式，跨域场景下（前端localhost:3000、后端http://my_url属于跨域），Lax模式的Cookie可能被浏览器拒绝存储。需根据环境调整：

• 生产HTTPS环境：必须添加SameSite: 'None'和secure: true（SameSite=None强制要求搭配Secure属性）：

  response.cookie("refreshToken", refreshToken, {
      maxAge: 3.154e10,
      httpOnly: true,
      sameSite: 'None',
      secure: true,
  });
  

• 本地HTTP开发环境：因Secure要求HTTPS，可改为SameSite: 'Lax'绕过限制：

  response.cookie("refreshToken", refreshToken, {
      maxAge: 3.154e10,
      httpOnly: true,
      sameSite: 'Lax',
  });
  

2. Cookie的Domain属性未匹配跨域场景 #

若后端未指定domain，Cookie默认绑定到后端请求域名（即my_url的域名）。如果前端与后端域名不一致，需将domain设为后端的根域名（例如后端是api.example.com，则domain: '.example.com'），确保跨域场景下浏览器能识别并存储。本地开发时若为不同域名，可暂时不指定domain，让浏览器自动处理。

3. 检查Kong是否转发Set-Cookie响应头 #

虽然CORS配置中credentials: true已开启，但需确认Kong未通过其他插件（如response-transformer）移除Set-Cookie头。可通过浏览器Network面板查看登录请求的响应头：

• 若没有Set-Cookie字段：说明后端或Kong未正确返回Cookie；
• 若有Set-Cookie但浏览器未存储：问题出在Cookie属性（如SameSite、Secure）。

4. 浏览器跨域Cookie限制 #

部分浏览器（如Chrome）对非HTTPS跨域Cookie有严格限制，本地开发可临时调整：

• 打开chrome://flags/#same-site-by-default-cookies和chrome://flags/#cookies-without-same-site-must-be-secure，禁用严格模式测试；
• 修改hosts文件将my_url映射到127.0.0.1，让前端与后端使用同域名访问。

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