首页 > 解决方案 > 来自 Next.js 的单独 api 的 Cookie

问题描述

我目前正在制作一个 Next.js 应用程序,但我遇到了 cookie 问题。我有一个在 localhost:3001 上运行的 express API,它在我使用 express-cookie-session 库注册/登录时设置 cookie。每当我通过邮递员执行此操作时,它都可以正常工作,但是当我从下一个应用程序执行此操作时,它的响应中没有“Set-Cookie”标头。我怀疑它与下一个应用程序有关,并且表示在不同的端口上并表示无法将 cookie 设置到下一个应用程序,但是我不确定该怎么做。如果重要的话,我想以这种方式设置 JWT。可以在响应正文中发送它们,但我想知道如何通过 cookie 来实现。

以下是一些相关配置:

app.use(cors());
app.set('trust proxy', true);
...
app.use(cookieSession({ signed: false, secure: false, sameSite: "lax" }));

注册控制器:

const signUp = async (req: Request, res: Response, next: NextFunction) => {
  ...
  const accessToken = TokenGenerator.generateAccessToken(user);
  const refreshToken = TokenGenerator.generateRefreshToken(user);
  user.refreshToken = refreshToken;
  ...
  req.session = { accessToken, refreshToken };
  res.send(user);
};

getServerSideProps功能

export const getServerSideProps = async (ctx) => {
  const headers = ctx.req.headers;
  const res = await axios.get("http://localhost:3001/users/current-user", {
    headers,
  });
  return { props: { data: res.data } };
};

编辑:Set-Cookie标题实际上显示在 chrome 控制台中,但它不是从 axios 响应中记录的控制台。

这是cookie的示例:

Set-Cookie: express:sess=eyJhY2Nlc3NUb2tlbiI6ImV5SmhiR2NpT2lKSVV6STFOaUlz
SW5SNWNDSTZJa3BYVkNKOS5leUpwWkNJNklqVm1abVEyTldSalpURXlaak5pT0RVellUWXlNR0
psT0NJc0ltVnRZV2xzSWpvaWJHdHNiaUlzSW1saGRDSTZNVFl4TURRME1qSXdOQ3dpWlhod0lq
b3hOakV3TkRReU1qRTVmUS5NN2szX1BVQy1hbzRQb2w4OXNiS05ndS1ndkpqNEVfUWdoX2RHSU
ZrZlZFIiwicmVmcmVzaFRva2VuIjoiZXlKaGJHY2lPaUpJVXpJMU5pSXNJblI1Y0NJNklrcFhW
Q0o5LmV5SnBaQ0k2SWpWbVptUTJOV1JqWlRFeVpqTmlPRFV6WVRZeU1HSmxPQ0lzSW1WdFlXbH
NJam9pYkd0c2JpSXNJbWxoZENJNk1UWXhNRFEwTWpJd05IMC5JdHA2WHh4aFRPMWJUc0oydGNM
ZU9hdFB3cWZWdWRsVmRQWkNnejB3eS1rIn0=; path=/; domain=http://localhost:3000.

标签: expresssessioncookiesnext.jssession-cookies

解决方案


我通过将此行添加到我的服务器配置中找到了解决方案: app.use(cors({ origin: "http://localhost:3000", credentials: true })); 以及在我的 axios 请求中将 withCredentials 设置为 true。


推荐阅读