在响应标头中使用 apollo，cookie 但未设置

Question

我正在开发一个用户登录/注册功能，作为一个更大项目的一部分，并且正在使用 localhost（apollo 服务器和 react apollo 前端）。我正在使用 express-session 进行会话。

提交登录时，我可以看到响应标头中有 set-cookie，但它没有在 Application->Cookies 中设置。

我尝试了不同的浏览器，使用 createHttpLink、apollo-boost，并使用 include & same-origin（使用 same-origin）。

我已经尝试让它工作 2 周了，但已经没有东西可以尝试了，这是我最后的选择！我知道这将是一件非常微不足道的事情，但我就是看不到。

如果我使用 GraphqL Playground 并更改设置以包含凭据，我可以看到那里设置了 cookie。

服务器在 localhost:8080/graphql 上运行 客户端在 localhost:3000 上运行

客户：

const client = new ApolloClient({
    link: new HttpLink({
        uri: 'http://localhost:8080/graphql',
        credentials: 'same-origin',
    }),
    cache: new InMemoryCache()
});

科斯：

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

快速会话：

app.use(
    session({
        name: "sess",
        secret: process.env.SESSION_SECRET,
        resave: false,
        saveUninitialized: false,
        cookie: {
            httpOnly: true,
            secure: false,
            maxAge: 1000 * 60 * 60 * 24 * 7,
        },
    })
);

响应 Cookie：

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Vary: Origin
Access-Control-Allow-Credentials: true
Content-Type: application/json
Content-Length: 69
set-cookie: sess=s%3AAZXnGb5BVc1aAOwH6zBNiT8mB6Ebf75k.in%2BPU1OvxymDPdPIZBf8%2FQzrRmM0S04tXFzXDwYCnk8; Path=/; Expires=Sat, 03 Nov 2018 13:59:57 GMT; HttpOnly
Date: Sat, 27 Oct 2018 13:59:57 GMT
Connection: keep-alive

Answer 1

如果您使用的是 npm 的 cors 包，那么它会产生问题，因此请使用默认的 graphql 服务器 cros 选项，如下所示：

服务器

    await server.start()
    server.applyMiddleware({
        app, cors: {
            origin: true,
            credentials: true
        }
    })

客户：

const client = new ApolloClient({
  uri: 'http://localhost:2424/graphql',
  cache: new InMemoryCache(),
  credentials: 'include'
})

Answer 2

我有同样的问题。如果您在 2 年后仍在寻找答案，请将客户端中的凭据设置为“包含”，如下所示：

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
  credentials: 'include'
});

Answer 3

我尝试通过使用 express 来修复它。但它不适用于 Apollo GraphQL。

const corsOptions = {
    origin: "http://localhost:3000",
    credentials: true
  };
app.use(cors(corsOptions));

所以，我尝试在 GraphQL 服务器中配置 cors 并且成功了。

对于 Apollo 服务器

const corsOptions = {
    origin: "http://localhost:3000",
    credentials: true
  };

const server = new ApolloServer({
  typeDefs,
  resolvers,
  cors: corsOptions
});

server.listen().then(({ url }) => {
  console.log(`? Server ready at ${url}`);
});

对于 GraphQL 瑜伽

const options = {
  cors: corsOptions
};

server.start(options, () =>
  console.log("Server is running on http://localhost:4000")
);

Answer 4

我设法通过将 CORS 设置直接传递给 applyMiddleware 来解决这个问题。

Answer 5

问题似乎是 CORS 配置之一。首先，将HttpLink改成credentials: 'include'；然后试试这个 CORS 中间件：

app.use(
  cors({ 
    origin: 'http://localhost:3000',
    credentials: true,
    allowedHeaders: ['Content-Type', 'Authorization'],
  })
);

如果您仍然收到错误 The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.，则表明 CORS 中间件未正确设置 Access-Control-Allow-Origin: http://localhost:3000（您的示例显示它正在返回 *，但我不确定这是否是复制/粘贴问题，因为cors 模块文档建议这应该可行。）