如何使用 apollo server express 设置 cookie

Question

我在后端使用 apollo server express，在前端使用 next js。

我一直在尝试使用上下文中的（响应）在后端设置 cookie，但不幸的是它不起作用。我需要你的帮助。

这是我的后端代码。

import http from 'http';
import { ApolloServer } from 'apollo-server-express';
import express from 'express';
import cors from 'cors';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core';
import { execute, subscribe } from 'graphql';
import {
    SubscriptionServer,
    ConnectionParams,
    ConnectionContext,
} from 'subscriptions-transport-ws';
import { connect } from './Config';
import { typeDefs } from './TypeDefs';
import { resolvers } from './Resolvers';
import { isAuthForSubscription } from './Helpers';
import cookieParser from 'cookie-parser';

const startServer = async () => {
    const app = express();

    app.use(
        cors({
            credentials: true,
            origin: 'http://localhost:3000',
        })
    );

    app.use(cookieParser());

    const httpServer = http.createServer(app);

    const subscriptionServer = SubscriptionServer.create(
        {
            schema: makeExecutableSchema({ typeDefs, resolvers }),
            execute,
            subscribe,
            onConnect: async (
                connectionParams: ConnectionParams,
                _websocket: any,
                context: ConnectionContext
            ) => {
                let user = null;
                if (connectionParams.Authorization) {
                    user = await isAuthForSubscription(connectionParams.Authorization);
                }
                return { context, user };
            },
        },
        {
            server: httpServer,
            path: '/graphql',
        }
    );

    const server = new ApolloServer({
        schema: makeExecutableSchema({ typeDefs, resolvers }),
        plugins: [
            ApolloServerPluginDrainHttpServer({ httpServer }),
            {
                serverWillStart: async () => {
                    return {
                        drainServer: async () => {
                            subscriptionServer.close();
                        },
                    };
                },
            },
        ],
        context: ({ req, res }) => ({ req, res }),
    });

    await server.start();

    server.applyMiddleware({ app });

    await new Promise<void>(resolve =>
        httpServer.listen({ port: 4000 }, resolve)
    );

    await connect();

    console.log(
        `server started on port http://localhost:4000${server.graphqlPath}`
    );

    return { server, app };
};
startServer();

// and my resolver is this one
import { ApolloError } from 'apollo-server-express';
import {
    TCreateAccountArgs,
    TLoginArgs,
    TContext,
    CookieName,
} from '../../__generated__';
import { generate } from '../../Helpers';
import { userModel } from '../../Models';
import { CookieOptions } from 'express';

export const login = async(_: any, args: TLoginArgs, { res, req }: TContext) => {
        try {
            const find = await userModel.findOne({ username: args.username });

            if (!find) {
                return new ApolloError('Account not found');
            }
            const comparePassword = generate.comparePassword(
                find.password,
                args.password
            );

            if (!comparePassword) {
                return new ApolloError('Incorrect password or username');
            }

            const generateToken = generate.generateToken({ _id: find._id });

            const cookieOptions: CookieOptions = {
                httpOnly: true,
                maxAge: 1 * 60 * 60 * 24 * 1000,
                secure: true
            };
            res.cookie(CookieName.token, generateToken, cookieOptions);

            return {
                token: generateToken,
                data: {
                    username: find.username,
                    _id: find._id,
                    email: find.email,
                    profilePicture: find.profilePicture,
                    createdAt: find.createdAt,
                    updatedAt: find.updatedAt,
                },
            };
        } catch (error: any) {
            return new ApolloError(
                `Unable to login due to internal server error ${error.message}`
            );
        }
    };

在前端我收到此错误消息。 无法读取未定义的属性“cookie”

Answer 1

这个问题几个月前就有了。

以防万一您还无法修复它，您在前端看不到 cookie 的原因是您使用了 httpOnly 选项，这些 cookie 不应该被浏览器（它们可用于处理服务器中的身份验证，同时保护您免受跨站脚本攻击）。

如果您确实需要在浏览器中读取这些 cookie，则应将 httpOnly 选项设置为 false。