如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。