React本地开发中能否访问NodeJS API设置的跨域Cookie？

先直接给你明确结论：默认情况下，浏览器不允许前端JavaScript读取不同域名下设置的Cookie——这是浏览器同源策略（Same-Origin Policy）的核心安全限制，目的是防止恶意网站窃取其他域名的敏感Cookie信息。

结合你的场景具体拆解：
你的React项目跑在localhost（比如常见的http://localhost:3000），而API部署在https://bianca-service-dev0.cfapps.io，这两个属于完全不同的源（协议、域名、端口只要有一个不一样就算跨域）。所以当API返回CSRF-TOKEN Cookie时，浏览器会帮你存储这个Cookie，但会严格限制localhost的前端代码通过document.cookie读取它——这属于跨域读取Cookie，直接违反同源策略，浏览器会直接拦截。

不过别担心，这并不代表这个Cookie不能在后续的API请求中自动携带。如果你需要让后续请求带上这个Cookie，得同时满足后端和前端的配置要求：

后端API必须配置的Cookie属性 #

在设置Set-Cookie响应头时，需要包含以下关键属性：

• SameSite=None：跨域场景下必须明确设置这个值，允许Cookie跨站发送（注意：这个属性必须和Secure一起用，Chrome等现代浏览器要求SameSite=None的Cookie必须通过HTTPS传输，你的API正好是HTTPS，符合要求）
• Secure：确保Cookie只在HTTPS连接中传递，进一步提升安全性
• HttpOnly（可选，但推荐）：如果你的业务不需要前端JS读取这个Cookie，一定要加上！它能阻止JS访问Cookie，避免XSS攻击窃取Token。如果确实需要前端读取（比如要把CSRF Token放在请求头里），就不能加这个属性，但同时要承担XSS风险
• Domain（可选）：如果希望Cookie能在子域名下共享，可以设置为.cfapps.io，但如果只是当前API域名使用，留空浏览器会自动绑定到API的域名

前端React请求的配置 #

不管你用fetch还是axios发起请求，都需要开启携带凭证的选项：

• 用fetch的话：

  fetch('https://bianca-service-dev0.cfapps.io/auth/login', {
    method: 'POST',
    credentials: 'include', // 关键：告诉浏览器携带跨域Cookie
    body: JSON.stringify(yourLoginData),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  

• 用axios的话：

  axios.post('https://bianca-service-dev0.cfapps.io/auth/login', yourLoginData, {
    withCredentials: true // 关键：开启携带跨域凭证
  })
  

配置完成后，后续调用API时，浏览器会自动把API设置的CSRF-TOKEN Cookie带上，但你依然不能通过document.cookie看到它——除非后端没设HttpOnly，同时满足跨域读取的额外条件（后端要设Access-Control-Allow-Credentials: true，前端开启withCredentials，Cookie的SameSite等属性正确）。但说实话，不建议前端读取跨域Cookie，更安全的做法是从登录接口的响应体里拿Token，存在localStorage或者React状态中，后续请求直接用这个值就行——毕竟HttpOnly Cookie能有效抵御XSS攻击，是更安全的实践。

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