Angular对接Node.js GraphQL API开启withCredentials触发CORS错误如何解决

1. 调整CORS中间件注册顺序

绝大多数这类问题都是因为CORS中间件注册位置过晚导致。必须将app.use(cors(corsOptions))放在所有路由、GraphQL中间件、其他业务中间件注册之前，否则预检OPTIONS请求会被后续路由/中间件拦截，返回默认的通配符CORS头。

2. 禁用GraphQL服务自带的CORS处理

如果你使用的是Apollo Server系列的GraphQL框架，它默认会自带CORS处理逻辑，会覆盖你在Express层面配置的CORS规则。需要在初始化Apollo Server时主动关闭自带CORS，或者直接在Apollo的配置项中传入正确的CORS参数。

3. 移除重复的CORS配置

不要同时使用cors包和自定义的res.header设置CORS头的中间件，两者同时生效会导致响应头出现重复的Access-Control-Allow-Origin字段，触发浏览器跨域拦截，只保留cors包的配置即可。

4. 检查上层代理的CORS配置

如果你本地部署时使用了Nginx、Docker端口映射、DevServer代理等上层服务，确认这些服务没有额外添加Access-Control-Allow-Origin: *的响应头，否则Node侧的配置会被覆盖。

后端完整配置示例（Express + Apollo Server） #

const express = require('express');
const { ApolloServer } = require('@apollo/server');
const { expressMiddleware } = require('@apollo/server/express4');
const cors = require('cors');

const app = express();

// 1. 最优先注册CORS中间件
const corsOptions = {
  origin: "http://localhost:4200",
  credentials: true,
};
app.use(cors(corsOptions));

// 2. 注册其他基础中间件
app.use(express.json());

// 3. 初始化Apollo Server，后续挂载时关闭自带CORS
const server = new ApolloServer({
  typeDefs, // 你的schema定义
  resolvers, // 你的resolver实现
});

await server.start();
// 挂载GraphQL路由，明确禁用自带CORS
app.use('/graphql', expressMiddleware(server, {
  cors: false,
  context: async ({ req, res }) => ({ req, res })
}));

app.listen(4000, () => {
  console.log('服务启动于 http://localhost:4000/graphql');
});

前端配置 #

你当前的Apollo配置无需修改，保持withCredentials: true即可正常携带Cookie完成身份认证。

内容的提问来源于stack exchange，提问作者S. Karki