Graphql Apollo 设置 cookie 不起作用

编程问答 2022-06-01

问题描述

我正在尝试在 apollo 客户端中设置 cookie。 我正在设置工作正常的响应cookie，也在graphql操场上设置“request.credentials”：“same-origin”或“include”并成功存储cookie。 当我尝试从 FE 应用程序（React、Apollo 客户端）存储 cookie 时，我的问题就开始了。当我输入凭据：“同源”时，应用程序正在运行，但未保存 cookie。当我使用“包含”时，查询被阻止。

前端

const RouterComponent: FC = () => {
  const cache = useMemo(() => {
    return new InMemoryCache();
  },[]);

  const client = useMemo(() => {
    const token = localStorage.getItem('token') || 'token';
    const httpLink = createHttpLink({
      uri: 'http://localhost:4000/graphql',credentials: 'include',headers: {
        authorization: token ? `Bearer ${token}` : '',},});

    const link = from([
      httpLink,createUploadLink({
        uri: 'http://localhost:4000/graphql',}),]);
    return new ApolloClient({
      link,cache,typeDefs,});
  },[cache]);

  return (
    <ApolloProvider client={client}>
      <Switch>
        <Route exact path="/" component={MainPage} />;
        <Route exact path="/:category" component={Category} />;
      </Switch>
    </ApolloProvider>
  );
};

查询

games: (_: any,args: any,{req,res}: any) => {
        const refresh_token = sign({userId: "123"},"secret",{expiresIn: "7d"})
        const access_token = sign({userId: "123"},{expiresIn: "15min"})

        res.cookie('refresh-token',refresh_token,{expire: 60 * 60 * 24 * 7}) // 7 days
        res.cookie('access-token',access_token,{expire: 60 * 15}) // 15 mins

        return Game.find()
      }

SERVER.TS

const { ApolloServer } = require( 'apollo-server-express');
const {typeDefs} = require( './typeDefs');
const {resolvers} = require( './resolvers');
const express = require( 'express');
const cors = require( 'cors');
const path = require( 'path');
const bodyParser = require( 'body-parser');
const mongoose = require("mongoose");
const dotenv = require('dotenv');

const MONGO_CONNECTION = ""

const app = express();

export default (async function () {
  try {
    
    await mongoose.connect(MONGO_CONNECTION,{
      useNewUrlParser: true,useUnifiedTopology: true})

    const server = new ApolloServer({
      typeDefs,resolvers,context: ({ req,res }: any) => {
        return {
          req,res
        };
      },});

    const corsConfig = {
      origin: '*',credentials: true,allowedHeaders: ['Content-Type','Authorization'],};

    dotenv.config();
    app.use(function (req: any,res: any,next: any) {
      res.setHeader('Access-Control-Allow-Origin','*');
      res.setHeader('Access-Control-Allow-Methods','GET,POST,OPTIONS,PUT,PATCH,DELETE');
      res.setHeader('Access-Control-Allow-Headers','X-Requested-With,content-type');
      res.setHeader('Access-Control-Allow-Credentials',true);
        next();
  });
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use('/images',express.static(path.join(__dirname,'images')));

    const dir = path.join(process.cwd(),'images');
    app.use(express.static(dir));
    app.use(express.static('public'))
    app.use(express.static('files'))
    
    server.applyMiddleware({ app,cors: corsConfig });
    app.listen({ port: 4000 },() =>
      console.log(`? Server ready at http://localhost:4000${server.graphqlPath}`)
    )
  } catch (err) {
    console.error(err);
  }
})();

感谢您的帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

apolloapolloapollocookiescookiesgraphqlgraphql