express.js 和 react.js cookie 保存到浏览器但不工作？

Posted 2023-03-04

【中文标题】express.js 和 react.js cookie 保存到浏览器但不工作？

【英文标题】：express.js and react.js cookie saved to browser but not working?

【发布时间】：2021-04-05 03:52:37

【问题描述】：

我有一个使用 express.js 的后端服务器，我的前端使用 react，所以当我登录时，cookie 将保存在浏览器中，但由于某种原因，会话没有持久化，当我尝试访问一些来自某些需要身份验证的路由的信息将拒绝访问。我使用邮递员登录，它会毫无问题地保持会话并且可以访问需要身份验证的路由，所以前端肯定有一个问题，它不会被创建这里是我的代码：

后端：

var cors = require('cors')

app.use(cors(
  origin: 'http://localhost:3000',
  methods: ['POST', 'PUT', 'GET', 'OPTIONS', 'HEAD'],
  credentials: true
));

前端：

const postData = () =>   //this is for login
    const requestBody = 
      username: name,
      password: password,
    ;
    const config = 
      headers: 
        "Content-Type": "application/x-www-form-urlencoded",
      ,
      withCredentials: true,
      accept: "application/json",
    ;
    axios
      .post(`$myUrl/login`, qs.stringify(requestBody), config)
      .then((res) => 
        console.log(res.data);
      )
      .catch((e) => 
        console.log(e);
      );
  ;

const getData = async () =>  //to access some data that requires authentication
    axios
      .get(`$myUrl/edit`)
      .then((res) => 
        console.log(res.data);
      )
      .catch((e) => 
        console.log(e);
      );
  ;

当我使用前端登录时，我收到一条成功消息（成功登录），这意味着发布请求没有问题，CORS 只有一个问题，即前端，什么可能是问题？

PS：有趣的是cookie实际上保存在浏览器中，但是当我尝试访问一些需要身份验证的信息时，它拒绝访问！

【问题讨论】：

能否提供设置cookie的代码？

我使用 express-session 但正如我所说，即使在邮递员中创建 cookie 本身并将其保存到浏览器中也不是问题，我可以登录并保持会话。我认为服务器端代码没有任何问题。在使用 react 之前，我使用 ejs 作为模板，它工作得很好

你的浏览器有没有Cookie，你请求的时候后端能收到吗？

是的，我的浏览器有cookie（见上图），我的后端收到请求但拒绝访问（认为我还没有登录）

您可能需要调试为什么后端认为您的浏览器 cookie 无效。尝试先绕过认证，登录后从请求中获取cookie。

【参考方案1】：

尝试在获取请求中也将凭据设置为 true：

const getData = async () =>  //to access some data that requires authentication
    axios
      .get(`$myUrl/edit`,  withCredentials: true )
      .then((res) => 
        console.log(res.data);
      )
      .catch((e) => 
        console.log(e);
      );
  ;