GraphQL跨域问题求助：已用cors()仍报No 'Access-Control-Allow-Origin'头错误

看起来你已经尝试了基础的cors配置，但还是遇到了跨域错误，别着急，咱们一步步排查最可能的原因：

1. 检查CORS中间件的加载顺序（最常见问题） #

Express的中间件是按注册顺序执行的，如果你的app.use(cors())放在了/graphql端点之后，那么对该端点的请求根本不会经过CORS处理，自然会报错。

正确的代码顺序应该是这样的：

const express = require('express');
const cors = require('cors');
const { graphqlHTTP } = require('express-graphql');
const yourSchema = require('./path-to-your-schema');

const app = express();

// 先注册CORS中间件，确保所有请求都经过它
app.use(cors());

// 再挂载GraphQL端点
app.use('/graphql', graphqlHTTP({
  schema: yourSchema,
  graphiql: true, // 开发环境可以开启，方便调试
}));

app.listen(3002, () => console.log('Server running on port 3002'));

一定要保证cors()在所有路由/端点定义之前

2. 配置更具体的CORS选项 #

默认的cors()可能无法覆盖某些场景，比如你的请求携带认证信息（cookie、token），或者需要限制特定的前端域名：

app.use(cors({
  origin: 'http://localhost:3000', // 替换成你的React项目运行的地址（比如默认3000端口）
  credentials: true, // 如果前端请求需要携带认证信息，必须开启这个
}));

开发环境可以暂时用origin: true允许所有来源，但生产环境务必指定具体域名，避免安全风险。

3. 避免GraphQL端点手动设置响应头冲突 #

如果你在graphqlHTTP的配置里手动设置了Access-Control-Allow-Origin这类头，会和CORS中间件的配置冲突，导致头信息异常。检查你的代码，确保没有类似这样的自定义头：

// ❌ 不要这样做，会和cors中间件冲突
app.use('/graphql', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  graphqlHTTP({ schema: yourSchema })(req, res);
});

4. 同步Apollo Client的配置 #

如果后端开启了credentials: true，前端Apollo Client也需要对应配置，否则请求会被浏览器拦截：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';

const httpLink = createHttpLink({
  uri: 'http://localhost:3002/graphql', // 确保地址正确
  credentials: 'include', // 和后端的credentials配置保持一致
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

5. 清除浏览器缓存或用无痕模式测试 #

有时候浏览器会缓存旧的响应头，导致新的CORS配置无法生效。尝试清除浏览器缓存，或者直接用无痕窗口发起请求，验证配置是否生效。

6. 排查其他中间件干扰 #

如果你还使用了其他中间件（比如helmet、自定义安全中间件），可能会覆盖或阻止CORS头的设置。比如helmet默认会限制一些跨域相关的头，需要额外配置允许CORS：

const helmet = require('helmet');
app.use(helmet({
  crossOriginResourcePolicy: false, // 允许跨域资源请求
}));

按照上面的步骤排查，大部分跨域问题都能解决。如果还是不行，可以检查浏览器开发者工具的Network标签，查看请求的响应头里是否包含Access-Control-Allow-Origin，以及具体的值是否符合预期。

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