GraphQL Apollo Server 4：如何设置响应标头和 cookie

Question

我对 Apollo Server 4 进行了基本设置，以便与 Azure Functions 集成。 我遵循了这个指南： https://www.apollographql.com/docs/apollo-server/migration

对于与 Azure Functions 的连接，我使用官方支持的集成包： https://github.com/apollo-server-integrations/apollo-server-integration-azure-functions#readme

我能够使用 Apollo Server 3 设置 cookie 和响应标头，但无法使其与 v4 一起使用。没有发送任何内容。

想法？

index.ts

import { ApolloServer } from '@apollo/server';
import {
    AzureFunctionsContextFunctionArgument,
    startServerAndCreateHandler,
} from '@as-integrations/azure-functions';
import type {
    AzureFunction,
    Context,
} from '@as-integrations/azure-functions/node_modules/@azure/functions';
import { myGraphQLApp } from '../src/index';
import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default';
import { GraphQLSchema } from 'graphql';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { applyMiddleware } from 'graphql-middleware';
import { enforceCorrelationId } from '../src/middleware/enforceCorrelationId';

const { typeDefs, resolvers } = myGraphQLApp;

export interface ContextExtended extends Context {
    accessToken?: string;
}

const schema: GraphQLSchema = makeExecutableSchema({ typeDefs, resolvers });
const schemaWithMiddleware: GraphQLSchema = applyMiddleware(schema, enforceCorrelationId());

const server: ApolloServer = new ApolloServer({
    schema: schemaWithMiddleware,
    csrfPrevention: true,
    introspection: true,
    cache: 'bounded',
    plugins: [ApolloServerPluginLandingPageLocalDefault({ footer: false })],
});

export default <AzureFunction>startServerAndCreateHandler(server, {
    context: async ({
        context,
        req,
    }: AzureFunctionsContextFunctionArgument): Promise<ContextExtended> => {
        return {
            accessToken: 'foo-test',
            ...context,
        };
    },
});

resolvers.ts

import 'graphql-import-node';
import typeDefs from './schema.graphql';
import { ContextExtended } from '../HttpTriggerGraphQL';

class MyGraphQLApp {
    public get typeDefs() {
        return typeDefs;
    }
    public get resolvers() {
        const resolvers = {
            Query: {
                hello: (_: unknown, args: unknown, context: ContextExtended) => {
                    const cookie =
                        'accessToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c; Max-Age=3600; HttpOnly=true; SameSite=None';
                    
                    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie

                    // A similar approach worked with V3 but not V4 ..
                    context.res.headers['Set-Cookie'] = cookie; // Dud
                    context.res.headers['x-foo'] = 'bar'; // Dud
                    context.res.cookies.push(cookie); // Dud
                    context.res.set({'x-foo': 'bar'}); // Dud

                    return 'hello';
                },
            },
        };
        return resolvers;
    }
}

export const myGraphQLApp = new MyGraphQLApp();

Answer 1

尝试在插件中添加响应头。

像这样，并在创建时包含此插件

ApolloServer

：

const customHeadersPlugin = {
    requestDidStart(requestContext) {
        return {
            willSendResponse({ response }) {
                response.http.headers.set('Access-Control-Allow-Origin', '*');
            },
        };
    },
}