跨域时前端携带Cookie发起GET请求失败求助

DevOps 小满

2026-7-14

跨域请求下Cookie无法携带的解决方案

问题核心

你的Cookie设置了domain=xxx.com，根据浏览器同源策略，只有请求xxx.com及其子域名时，浏览器才会自动携带这些Cookie。跨域请求yyy.com时，浏览器会拦截Cookie，不会发送到后端——这就是跨域场景下后端收不到Cookie的根本原因。

之前的测试结果也能佐证：API测试工具不受浏览器同源策略限制，所以能正常发送Cookie；同域名部署时符合同源规则，Cookie自然能被携带。

可行解决方案

1. 调整Cookie的Domain属性（仅限同主域场景）

如果xxx.com和yyy.com是同一主域的子域名（比如xxx.com和api.xxx.com），可以修改Cookie的domain为.xxx.com（注意前缀的点），这样浏览器会允许跨子域请求时携带Cookie：

cookie-1: AAA=aaa; path=/; domain=.xxx.com
cookie-2: BBB=bbb; path=/; domain=.xxx.com

如果是完全不同的顶级域名（比如xxx.com和yyy.com），该方法不适用。

2. 配置前端代理（推荐跨域场景使用）

在React项目中配置代理，让前端请求先发送到同域名的代理服务器，再由代理转发到yyy.com后端，避开浏览器的跨域限制。

在React项目根目录创建src/setupProxy.js，内容如下：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', // 前端请求的统一前缀
    createProxyMiddleware({
      target: 'https://yyy.com', // 后端目标域名
      changeOrigin: true,
      credentials: true, // 允许携带Cookie到后端
    })
  );
};

之后前端请求时，将原本的https://yyy.com/api/xxx改为/api/xxx，代理会自动转发请求并携带xxx.com的Cookie。

3. 替换Cookie为Token（通用跨域方案）

如果无法调整Cookie或使用代理，可以将Cookie中的AAA、BBB值转移到请求头中（比如Authorization字段），这种方式不受跨域限制。

前端axios请求示例：

// 从Cookie中提取值（可使用js-cookie库简化操作）
const AAA = document.cookie.split(';').find(item => item.trim().startsWith('AAA=')).split('=')[1];
const BBB = document.cookie.split(';').find(item => item.trim().startsWith('BBB=')).split('=')[1];

axios.get('/your-api-path', {
  baseURL: 'https://yyy.com',
  headers: {
    'Authorization': `Bearer ${AAA}:${BBB}` // 自定义格式传递值
  }
});

后端从req.headers.authorization中提取解析即可。

4. 后端反向代理

如果前端无法配置代理，可在xxx.com的后端（若存在）设置反向代理，将请求转发到yyy.com并携带Cookie。以Express为例，使用http-proxy-middleware实现：

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/proxy-yyy', createProxyMiddleware({
  target: 'https://yyy.com',
  changeOrigin: true,
  credentials: true,
  onProxyReq: (proxyReq, req, res) => {
    // 将前端请求携带的Cookie添加到代理请求中
    const cookies = req.headers.cookie;
    if (cookies) {
      proxyReq.setHeader('Cookie', cookies);
    }
  }
}));

前端请求https://xxx.com/proxy-yyy/your-api即可完成转发。

现有配置验证

你当前的前后端配置（axios.defaults.withCredentials = true、CORS的Access-Control-Allow-Credentials=true、Access-Control-Allow-Origin设为请求来源）都是正确的，问题不在这些配置本身，核心是浏览器的Cookie同源限制。

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