如何为Express服务中的PostGraphile配置指定允许的CORS跨域源

你当前使用enableCors: true的配置会默认启用通配符*的跨域规则，要自定义允许的跨域源，按以下步骤操作即可：

方案1：使用cors包配置（更稳定，推荐） #

这个方案通过单独配置Express的CORS中间件实现自定义规则，关闭PostGraphile自带的CORS能力即可：

• 第一步：安装cors依赖

npm install cors
# 或 yarn add cors

• 第二步：调整代码配置

const cors = require('cors');

// 定义允许的跨域源列表
const allowedOrigins = ['https://你的前端域名.com', 'http://localhost:3000'];

// 配置CORS中间件
app.use(cors({
  origin: (origin, callback) => {
    // 允许匹配的源，或者无origin的本地工具请求（比如Postman、curl）
    if (allowedOrigins.includes(origin) || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  // 如果需要跨域传递cookie等凭证，开启下面配置
  // credentials: true
}));

// PostGraphile配置关闭自带的CORS
app.use(
  postgraphile(process.env.DATABASE_URL || process.env.POSTGRES, 'public', {
    watchPg: true,
    graphiql: true,
    enhanceGraphiql: true,
    enableCors: false, // 关闭自带CORS能力
  }),
);

方案2：通过PostGraphile配置项自定义响应头 #

如果你不想引入额外依赖，也可以通过additionalHeaders配置项直接指定跨域头，需要同时处理预检OPTIONS请求：

const allowedOrigin = 'https://你的前端域名.com';

app.use(
  postgraphile(process.env.DATABASE_URL || process.env.POSTGRES, 'public', {
    watchPg: true,
    graphiql: true,
    enhanceGraphiql: true,
    enableCors: false,
    additionalHeaders: {
      'Access-Control-Allow-Origin': allowedOrigin,
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    },
  }),
);

// 处理预检OPTIONS请求，替换为你的PostGraphile路由地址
app.options('/graphql', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', allowedOrigin);
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(204);
});

注意事项 #

• 如果配置了多个允许的源，响应头会返回当前请求匹配到的具体源，不会返回通配符
• 如果需要跨域传递凭证（Cookie、HTTP认证信息等），必须设置Access-Control-Allow-Credentials: true，且不能使用通配符源

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