ReactJS使用apollo-client不设置从ExpressJS接收的cookie使用apollo-server-express

如何解决ReactJS使用apollo-client不设置从ExpressJS接收的cookie使用apollo-server-express

我使用apollo-server-express和postgresql创建了简单的后端api，它具有两个突变：注册和登录。使用登录突变时，API会创建一个auth令牌和一个刷新令牌，然后使用res.cookie(...)将它们作为cookie发送。在前端，我正在使用apollo-client访问我的GraphQL api。当我调用登录突变时，一切都会按预期进行，我收到了set-cookie标头以及所请求的用户详细信息。但是，cookie不会显示在Application下的Cookies标签中。有人可以帮帮我吗。我正在使用以下代码： server/index.ts

import "dotenv/config";
import "reflect-metadata";
import * as express from "express";
import * as cors from "cors";
import {
  ConnectionOptions,createConnection,getConnectionOptions
} from "typeorm";
import { buildSchema } from "type-graphql";
import { GraphQLSchema } from "graphql";
import { ApolloServer } from "apollo-server-express";
import * as path from "path";
import * as cookieParser from "cookie-parser";

import {
  UserResolver,DepartmentResolver,CourseResolver,SubjectResolver,DocumentResolver
} from "./modules";
import { customAuthChecker,formatError,GQLRuntimeContext } from "./utils";

const getOptions = async () => {
  console.log(`NODE_ENV: ${process.env.NODE_ENV}`);
  let connectionOptions: ConnectionOptions;
  connectionOptions = {
    type: "postgres",synchronize: true,logging: false,entities: [path.join(__dirname,"./modules/**/*entity.*")]
  };
  if (process.env.DATABASE_URL) {
    Object.assign(connectionOptions,{ url: process.env.DATABASE_URL });
  } else {
    // gets your default configuration
    // you could get a specific config by name getConnectionOptions('production')
    // or getConnectionOptions(process.env.NODE_ENV)
    connectionOptions = await getConnectionOptions();
  }

  return connectionOptions;
};

const connect = async (): Promise<void> => {
  const typeormconfig = await getOptions();
  console.log(`\n`);
  console.log(`\tconfiguration: `);
  console.log(typeormconfig);
  console.log(`\n`);
  await createConnection(typeormconfig);
};
connect().then(async () => {
  const schema: GraphQLSchema = await buildSchema({
    resolvers: [
      UserResolver,DocumentResolver
    ],authChecker: customAuthChecker
  });
  const app: express.Application = express();
  app.use(cookieParser());
  const server: ApolloServer = new ApolloServer({
    schema,context: ({ req,res }: GQLRuntimeContext): GQLRuntimeContext => ({
      req,res
    })
  });
  server.applyMiddleware({
    app,path: "/",cors: { origin: "*",credentials: true }
  });

  app.listen({ port: process.env.PORT || 4000 },() => {
    console.log(
      `? Server ready at http://localhost:${process.env.PORT || 4000}${
        server.graphqlPath
      }`
    );
  });
});

client/index.tsx：

import React from "react";
import ReactDOM from "react-dom";
import {
  ApolloClient,ApolloProvider,NormalizedCacheObject,InMemoryCache
} from "@apollo/client";
import { createHttpLink } from "apollo-link-http";

import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

const link: any = createHttpLink({
  uri:
    /*process.env.NODE_ENV === "production"
      ? "https://the-notebook-graph.herokuapp.com/graphql"
  : */ "http://localhost:4000/graphql",credentials: "include"
});
const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  link,cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ApolloProvider>,document.getElementById("root")
);

serviceWorker.register();

---

Response headers in ReactJS application

Cookies after receiving the response

尝试在前端使用{...credentials: "include"...}时出现以下错误：

Unhandled Rejection (Error): Failed to fetch