Node.js/Express 跨域设置Cookie未在浏览器生效问题

Cookie写入失败是三个配置不符合浏览器跨站Cookie安全规则导致的，浏览器默认拦截这类不符合规则的Cookie时不会在控制台抛错，只会在开发者工具对应请求的Cookies面板留下拦截记录：

• 第一处错误是secure: true和你当前的HTTP服务不匹配。带Secure标记的Cookie仅允许在HTTPS加密连接下被浏览器存储，你现在服务跑在http://localhost:8080明文HTTP上，哪怕响应带了Set-Cookie头也会被直接丢弃。注意：只有你直接在localhost域名下打开页面发请求时，Chrome才会给localhost做Secure规则豁免，你现在在yahoo.com这类第三方站点上下文发跨站请求到localhost，这个豁免不生效。
• 第二处错误是fetch请求写了mode: 'no-cors'。no-cors模式发起的是不透明请求，浏览器会限制所有对响应内容的访问，哪怕你写了credentials: 'include'，跨站场景下也不会处理响应里的Set-Cookie头，你后端已经开了CORS配置，完全不需要用no-cors模式。
• 补充：Chrome 80以后的版本对跨站Cookie校验极严，只要SameSite、Secure、协议、CORS配置任意一项不匹配，直接静默拦截，不会给控制台警告。

1. 调整Cookie配置，让secure属性和运行环境匹配：
   本地测试如果暂时不想配HTTPS，可以先把secure设为false，生产环境必须开HTTPS并把secure改回true——记住SameSite: 'none'必须搭配Secure属性才会被浏览器认可。

   test.forEach((cookie, index) => {
       res.cookie('testCookie' + index, cookie, {
           sameSite: 'none',
           // 生产环境（HTTPS）开secure，本地HTTP临时关闭
           secure: process.env.NODE_ENV === 'production',
           httpOnly: true,
           path: '/'
       })
   });
   

   如果要完全模拟生产环境，推荐用mkcert给localhost签本地可信证书，给Express加上HTTPS配置，全程开secure: true测试，避免本地和线上环境不一致出问题。
2. 修改前端fetch请求，删掉mode: 'no-cors'配置，默认的cors模式才能正常处理跨域凭证和Set-Cookie头：

   fetch('http://localhost:8080/bid', {
       method: 'GET',
       redirect: 'follow',
       credentials: 'include'
   })
   

3. 确认CORS配置有效性：你当前写的cors({ origin: true, credentials: true })是没问题的，origin: true会自动反射请求来源作为Access-Control-Allow-Origin的值，刚好匹配credentials模式下不能用通配符*作为允许源的要求，不需要额外调整。
4. 验证方式：打开Chrome开发者工具，切到Network面板点开对应的/bid请求，先看Response Headers里有没有正常返回Set-Cookie字段，再切到该请求的Cookies标签页，如果有拦截记录会直接标注拦截原因，对应调整配置即可。

注意：上线时必须给服务域名配置有效HTTPS证书，同时把Cookie的secure属性设为true，否则所有现代浏览器都会拦截你的跨站Cookie。

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