使用NextJS+Apollo Client遇CSRF拦截问题（Apollo Server v4）

Apollo Server 4默认启用了CSRF防护机制，这是导致你之前在v3正常运行的文件上传Mutation报错的核心原因——v3版本默认未开启该防护，而v4对非GET请求（包括文件上传的multipart/form-data类型请求）增加了安全校验，只有满足特定条件的请求才会被允许执行。

以下是几种可行的解决方法：

1. 客户端添加Apollo-Require-Preflight请求头 #

在Apollo Client的文件上传链路配置中添加该头，告诉Apollo Server此请求需要先发起OPTIONS预请求验证权限，通过后再执行Mutation：

import { createUploadLink } from 'apollo-upload-client';

const uploadLink = createUploadLink({
  uri: '/api/graphql', // 你的GraphQL接口地址
  headers: {
    'Apollo-Require-Preflight': 'true',
  },
});

这个方法适用于跨域或同域场景，是官方推荐的兼容方式。

2. 服务端调整CSRF防护策略 #

如果是本地调试或信任所有请求来源，可以临时关闭CSRF防护（生产环境不建议直接关闭），或者自定义验证逻辑：

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

const server = new ApolloServer({
  typeDefs,
  resolvers,
  csrfPrevention: {
    // 仅调试用，生产环境请替换为自定义验证逻辑
    requestProtection: false,
    // 生产环境示例：校验请求Origin是否在白名单内
    // validateRequest: (request) => {
    //   const allowedOrigins = ['https://your-app-domain.com'];
    //   return allowedOrigins.includes(request.headers.get('origin'));
    // }
  },
});

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

3. 配置CORS允许合法来源 #

如果是跨域部署，确保前端域名在服务端的CORS白名单内，Apollo Server会自动校验请求的Origin是否合法：

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
  cors: {
    origin: ['https://your-frontend-domain.com'], // 允许的前端域名列表
    credentials: true,
  },
});

需要注意的是，文件上传请求使用multipart/form-data类型，Apollo Server v4对这类请求的CSRF校验逻辑比普通JSON请求更严格，所以务必确保请求符合安全校验规则，优先使用方法1或3来保证安全性。

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