如何在Apollo Server 4集成Azure时配置CORS或自定义请求头？

方法一：通过Azure Portal配置（推荐） #

无需修改代码，直接在Azure后台配置CORS规则：

• 登录Azure Portal，找到你的Function App实例
• 左侧导航栏选择「CORS」选项
• 在「允许的来源」列表中添加你的前端应用域名（例如https://your-frontend-domain.com，测试阶段可临时用*，但生产环境务必指定具体域名）
• 保存配置后，Azure会自动为所有请求添加正确的CORS响应头

方法二：代码层面自定义CORS头 #

如果需要更灵活的控制，可以在startServerAndCreateHandler的配置中手动添加响应头并处理预检请求：

const { ApolloServer } = require('@apollo/server');
const { startServerAndCreateHandler } = require('@as-integrations/azure-functions');
const server = new ApolloServer({
  typeDefs,
  resolvers,
  csrfPrevention: false, 
});

exports.graphqlHandler = startServerAndCreateHandler(server, {
  async context({ req, res }) {
    // 设置CORS允许的来源，替换为你的前端域名
    res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');
    // 允许的请求方法
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    // 允许的请求头
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    // 处理浏览器预检OPTIONS请求，直接返回200
    if (req.method === 'OPTIONS') {
      res.status(200).end();
      return;
    }

    return { req };
  },
});

注意事项 #

• 生产环境禁止使用*作为允许来源，必须指定具体域名，避免跨域安全风险
• 若同时配置了Azure Portal的CORS规则和代码中的自定义头，Portal配置优先级更高
• 必须确保OPTIONS预检请求被正确响应，否则浏览器会拦截后续的实际请求

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