已设置CORS头仍报错：Access-Control-Allow-Credentials为空问题排查

针对你遇到的CORS错误（Access-Control-Allow-Credentials头为空），可以从以下几个方向排查：

1. 确保CORS中间件正确处理预检请求 #

浏览器发送的CORS预检请求是OPTIONS方法，若你的CORS配置仅挂载在/graphql路由下，可能存在预检请求未被正确处理的情况。可以通过两种方式解决：

方案A：全局启用CORS配置 #

将CORS配置放在所有路由之前，确保所有请求（包括预检请求）都能匹配到：

const corsOptions = {
  origin: "http://localhost:3000",
  credentials: true
};
app.use(cors(corsOptions));

// 再挂载GraphQL路由
app.use(
  "/graphql",
  express.json(),
  expressMiddleware(server, {
    context: async ({ req, res }) => buildContext({ req, res }),
  })
);

方案B：单独处理OPTIONS预检请求 #

如果不想全局启用CORS，可专门为/graphql的OPTIONS请求配置处理逻辑：

// 处理OPTIONS预检请求
app.options("/graphql", cors({
  origin: "http://localhost:3000",
  credentials: true
}));

// 处理POST/GET的GraphQL请求
app.use(
  "/graphql",
  cors({
    origin: "http://localhost:3000",
    credentials: true
  }),
  express.json(),
  expressMiddleware(server, {
    context: async ({ req, res }) => buildContext({ req, res }),
  })
);

2. 检查是否有其他中间件覆盖响应头 #

后续的中间件（包括Apollo Server内部逻辑）可能会覆盖你设置的Access-Control-Allow-Credentials头。可以添加调试中间件，在响应发送前打印头信息确认：

// 放在所有中间件最前面
app.use((req, res, next) => {
  res.on('finish', () => {
    console.log('最终响应头:', res.getHeaders());
  });
  next();
});

3. 确认客户端请求配置正确 #

虽然报错提示请求的credentials mode为include，仍需确认客户端是否正确携带凭证：

• 使用fetch时：

  fetch('http://localhost:4000/graphql', {
    method: 'POST',
    credentials: 'include',
    // 其他请求配置
  });
  

• 使用axios时：

  axios.post('http://localhost:4000/graphql', data, {
    withCredentials: true
  });
  

4. 避免Apollo Server与Express的CORS配置冲突 #

Apollo Server本身支持CORS配置，若同时在Express和Apollo中配置，可能导致冲突。可以尝试直接在expressMiddleware中配置CORS：

app.use(
  "/graphql",
  express.json(),
  expressMiddleware(server, {
    context: async ({ req, res }) => buildContext({ req, res }),
    cors: {
      origin: "http://localhost:3000",
      credentials: true
    }
  })
);

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