跨域读取Cookie遇阻：CSP与CORS配置问题排查

问题描述 #

我在www.domain-a.org的Express服务器上设置了一个secure、httpOnly、SameSite=None的Cookie，希望通过CORS和CSP从同样使用Express的www.domain-b.com获取该Cookie。当用户访问domain-b时，服务器会向domain-a发起fetch请求以获取Cookie，但测试代码无法正常运行，从domain-b获取domain-a的Cookie时返回空对象。想问这类请求是否可行？

测试代码 #

domain-a.org 服务器代码 #

// 原CORS配置存在重复设置Access-Control-Allow-Origin的问题，正确配置见下文分析
router.get('/set-cookie', (req, res) => {
  res.cookie('domain-a-cookie', 'domain-a-value', {
    httpOnly: true,
    sameSite: 'none',
    secure: true,
    maxAge: 60 * 60 * 24 * 30
  })

  res.send('set domain-a cookie')
})

router.get('/send-cookie', cors({ 
  origin: 'https://www.domain-b.com', 
  methods: ['GET','OPTIONS'], 
  credentials: true, 
  preflightContinue: true
}), (req, res) => {
  const response = {
    status: 'success'
  }

  if (req.cookies && req.cookies['domain-a-cookie']) {
    response.data = {
      cookie: req.cookies['domain-a-cookie']
    }
  }

  res.status(200).send(response)
})

domain-b.com 服务器代码 #

router.get('/get-cookie', (req, res) => {
  fetch('https://www.domain-a.org/send-cookie', {
    method: 'GET',
    mode: 'cors',
    credentials: 'include'
  })
    .then(response => {
      if (response.ok) {
        return response.json()
      }

      return Promise.reject(response)
    })
    .then(result => {
      if (result.status === 'success' && result.data && result.data.cookie) {
        res.cookie('domain-b-cookie', result.data.cookie, {
          httpOnly: true,
          sameSite: 'none',
          secure: true,
          maxAge: 60 * 60 * 24 * 30
        })

        res.status(200).send({ status: 'success' })
      } else {
        res.status(500).send(result)
      }
    })
    .catch(error => {
      res.status(500).send(error)
    })
})

问题分析与解决方案 #

这类跨域获取Cookie的请求是可行的，但你的代码存在几个关键错误：

1. 核心错误：请求发起位置错误 #

你在domain-b的服务器端路由中发起fetch请求，这是服务器到服务器的请求，不会携带用户浏览器中存储的domain-a的Cookie。Cookie是保存在用户浏览器中的，只有浏览器端发起的跨域请求才会自动携带对应域名的Cookie。

解决方法：将fetch逻辑移到domain-b的前端页面代码中，而非服务器路由里。例如在domain-b的页面JS中：

// domain-b前端页面的JS代码
fetch('https://www.domain-a.org/send-cookie', {
  method: 'GET',
  credentials: 'include' // 必须设置这个才会携带跨域Cookie
})
.then(res => res.json())
.then(data => {
  // 若需要将Cookie数据传给domain-b服务器存储，可发起另一个请求
  fetch('/save-cookie', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cookie: data.data?.cookie })
  })
  .then(serverRes => serverRes.json())
  .then(serverData => console.log('Cookie已存储到domain-b', serverData));
})
.catch(err => console.error('请求失败', err));

同时，在domain-b的服务器上新增一个接收Cookie的路由：

router.post('/save-cookie', (req, res) => {
  const cookieVal = req.body.cookie;
  if (cookieVal) {
    res.cookie('domain-b-cookie', cookieVal, {
      httpOnly: true,
      sameSite: 'none',
      secure: true,
      maxAge: 60 * 60 * 24 * 30
    });
    res.status(200).send({ status: 'success' });
  } else {
    res.status(400).send({ status: 'error', msg: 'Cookie值缺失' });
  }
});

2. domain-a的CORS配置问题 #

原配置中重复设置了Access-Control-Allow-Origin（同时写了具体域名和true），这会导致响应头无效。另外需确保：

• Access-Control-Allow-Origin必须设置为具体的允许域名（不能是通配符*），即https://www.domain-b.com
• 必须包含Access-Control-Allow-Credentials: true，这通过cors中间件的credentials: true参数自动添加

3. Cookie设置的注意事项 #

确认domain-a设置Cookie时的参数：

• sameSite: 'none'必须配合secure: true，否则浏览器会拒绝存储该Cookie
• 无需设置domain属性（不同主域无法共享Cookie，默认domain为domain-a.org，浏览器只会在向该域名发起请求时携带）

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