本地NestJS访问/graphql遇CSRF错误，无法跳转Apollo Sandbox？

错误原因 #

直接在浏览器地址栏访问http://localhost:3000/graphql时，浏览器发送的GET请求未携带Apollo Server CSRF防护要求的合规请求头（比如Content-Type不属于application/json这类允许的类型，也没有x-apollo-operation-name或apollo-require-preflight头），导致请求被CSRF拦截逻辑阻断，无法触发返回Apollo Sandbox页面的流程。

而Apollo Studio沙箱会自动在请求中添加符合要求的头信息（比如将Content-Type设为application/json，或带上指定的操作名头），因此能正常与服务端通信。

解决方案 #

方案1：调整Apollo Server配置，允许开发环境访问Sandbox #

在NestJS的GraphQL模块配置中，修改Apollo Server的CSRF防护设置，让浏览器的GET请求能正常加载Sandbox页面（仅建议开发环境使用）：

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: true, // 你的Schema配置
      apollo: {
        server: {
          csrfPrevention: false, // 禁用CSRF防护
          allowUnsafeRequests: true, // 允许浏览器GET这类"不安全"请求
        },
      },
    }),
  ],
})
export class AppModule {}

方案2：优化CORS配置，允许必要请求头 #

虽然已启用CORS，但可以明确指定允许Apollo需要的头，避免头被拦截：

const app = await NestFactory.create(AppModule, { bufferLogs: true });
app.enableCors({
  allowedHeaders: ['Content-Type', 'x-apollo-operation-name', 'apollo-require-preflight'],
  methods: ['GET', 'POST'],
});

方案3：手动构造合规请求测试 #

如果不想修改配置，可以通过浏览器开发者工具的Network面板发送POST请求：

• 设置Content-Type为application/json
• 请求体传入GraphQL查询内容，示例：

{ "query": "{ hello }" }

注意事项 #

生产环境请勿禁用CSRF防护，该操作仅适合本地开发调试场景。

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