Next.js 中为啥没有通过 getServerSideProps 将 cookie 发送到服务器？

Posted 2023-03-08

【中文标题】Next.js 中为啥没有通过 getServerSideProps 将 cookie 发送到服务器？

【英文标题】：Why are cookies not sent to the server via getServerSideProps in Next.js?Next.js 中为什么没有通过 getServerSideProps 将 cookie 发送到服务器？

【发布时间】：2021-11-02 12:34:50

【问题描述】：

cookies不是通过getServerSideProps发送到服务器的，这里是前端的代码：

export async function getServerSideProps() 
  const res = await axios.get("http://localhost:5000/api/auth", withCredentials: true);
  const data = await res.data;
  return  props:  data  

在服务器上，我有一个检查访问 JWT 令牌的策略。

export class JwtStrategy extends PassportStrategy(Strategy, "jwt") 
    constructor() 
        super(
            ignoreExpiration: false,
            secretOrKey: "secret",
            jwtFromRequest: ExtractJwt.fromExtractors([
                (request: Request) => 
                    console.log(request.cookies) // [Object: null prototype] 
                    let data = request.cookies['access'];
                    return data;
                
            ]),
        );
    

    async validate(payload: any)
        return payload;
    

也就是说，当我通过 getServerSideProps 发送请求时，cookie 不会到达服务器，但如果我发送，例如通过 useEffect，那么 cookie 会正常到达。

【问题讨论】：

getServerSideProps 得到一个 ctx 参数，它有 req 和 res，参考 here ，你可以使用 nookies 库来解析 cookie

@SachinAnanthakumar，你能告诉我这是如何用我的代码示例完成的吗？

参考this

@SachinAnanthakumar 也在服务器上获得 [Object: null prototype] :(

@ОвовОчоы 您需要将 cookie 从 getServerSideProps 上下文显式传递给 axios 请求。如果你试过了，但还是不行，你能告诉我们你是怎么做的吗？

【参考方案1】：

这是因为getServerSideProps 中的请求不会在浏览器中运行（在每个请求上都会自动发送 cookie），但实际上会在 Node.js 环境中的服务器上执行。

这意味着您需要通过explicitly pass the cookies 向axios 请求发送它们。

export async function getServerSideProps( req ) 
    const res = await axios.get("http://localhost:5000/api/auth", 
        withCredentials: true,
        headers: 
            Cookie: req.headers.cookie
        
    );
    const data = await res.data;
    return  props:  data  

【讨论】：

谢谢伙计。这有助于解决基于 nextjs + lumen api 的应用程序的问题。