Apollo4与GraphQL生产环境CORS问题求助

问题说明 #

访问生产环境GraphQL服务器 https://mov****.at/graphql 时触发CORS错误，报错内容：

Cross-Origin Resource Sharing error: PreflightMissingAllowOriginHeader

已在Apollo服务器启动文件index.mjs中配置CORS规则：

app.use(
  '/graphql',
  cors({ origin: ['https://mov***.at', 'https://mov***.at/graphql', 'https://studio.apollographql.com'] }),
  bodyParser.json(),
  expressMiddleware(server),
);

同时在graphql.module.ts中设置了请求地址：

const uri = 'https://mov***.at/graphql';

排查与解决步骤 #

1. 修正CORS配置的Origin与方法规则 #

CORS校验的是域名/端口，而非具体路径，先移除origin里的/graphql路径，同时显式允许预检请求（OPTIONS方法）：

app.use(
  '/graphql',
  cors({
    origin: ['https://mov***.at', 'https://studio.apollographql.com'],
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true // 若请求携带Cookie或认证信息，需开启此项
  }),
  bodyParser.json(),
  expressMiddleware(server),
);

2. 确认Apollo Server的配置优先级 #

如果创建Apollo Server实例时也配置了CORS，会覆盖express中间件的规则。检查是否存在如下代码：

const server = new ApolloServer({
  typeDefs,
  resolvers,
  cors: { /* 此处配置会覆盖express的cors中间件 */ }
});

若存在，将CORS规则统一移到Apollo Server配置中，同时简化express中间件：

// Apollo Server配置
const server = new ApolloServer({
  typeDefs,
  resolvers,
  cors: {
    origin: ['https://mov***.at', 'https://studio.apollographql.com'],
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true
  }
});

// express中间件简化
app.use(
  '/graphql',
  bodyParser.json(),
  expressMiddleware(server),
);

3. 检查反向代理/CDN的拦截规则 #

若服务器前端有Nginx、Cloudflare这类代理或CDN，它们可能拦截了OPTIONS请求，未正确转发CORS响应头。以Nginx为例，需添加如下配置：

location /graphql {
  if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin "https://mov***.at";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type, Authorization";
    add_header Access-Control-Max-Age 86400;
    return 204;
  }
  // 其他转发配置...
}

同时确认CDN规则未移除或修改CORS响应头。

4. 手动测试预检请求 #

用curl发送OPTIONS请求，验证服务器响应头：

curl -X OPTIONS https://mov****.at/graphql -H "Origin: https://mov***.at" -i

查看响应头是否包含Access-Control-Allow-Origin，且值与请求的Origin匹配。若未包含，说明服务器端配置未生效，需排查中间件顺序或配置优先级。

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