为啥 Postman 在我的 React 应用程序中接收到 express 会话 cookie 而不是我的 post 请求

Posted

技术标签:

【中文标题】为啥 Postman 在我的 React 应用程序中接收到 express 会话 cookie 而不是我的 post 请求【英文标题】:Why Postman recive the express session cookie but not my post request in my React app为什么 Postman 在我的 React 应用程序中接收到 express 会话 cookie 而不是我的 post 请求 【发布时间】:2019-08-30 07:55:33 【问题描述】:

我有一个带有 express、express-session 和护照的 nodejs 服务器用于身份验证。我的登录路线如下所示:

router.post('/login', passport.authenticate('local'), (req, res) => 
  return res.status(200).json(
    message: "Auth successful",
    username: req.user.username
  )
)

当我使用 Postman 测试路由时,我在响应中收到带有会话 ID 的 cookie:Postman result 但是当我在 React 中使用 axios 进行发布请求时,我没有收到任何 cookie:

const login = (email, password) => 
    const reqBody = 
        email,
        password
    

    const config = 
        withCredentials : true,
    

    return axios.post(`$serverUrl/user/login`, reqBody, config)

这是我的 Node.js 服务器中的 cors:

// Cors definition 
app.use((req, res, next) => 
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  res.setHeader('Access-Control-Allow-Credentials', true)

  next()
)

Network tab on Chrome 如您所见,控制台中没有 cookie 选项卡并在标题中注明。所以我想知道为什么以及如何解决这个问题。

【问题讨论】:

这似乎是一个跨域问题,您是在 localhost:4200 上托管您的网站还是在其他端口上而不是 4200 上的服务器 我的 cors 标头设置在我的服务器上,我收到状态 200 以及我的 React 应用程序中的消息和用户名。如果是跨域问题,我是否根本无法提出请求?为了回答你的问题,我的服务器在 5000 端口,我的客户端在 3000 端口。 您能否发布您用于跨源的标头,因为您可能需要设置一些额外的标头以保留 cookie 按照您的要求,我在我的问题中添加了我在服务器上设置的标头。 【参考方案1】:

所以!我找到了为什么我可以在 Postman 响应中看到 cookie 而不是我的浏览器(Chrome)的答案。我在 chrome 中找到了 cookie,而不是在页面控制台的 application -> Storage -> Cookies 中,而是在 chrome://settings/cookies/detail?site=192.168.2.89 。

我理解的是 express-session 或 postman.session() 只在 cookie 上设置 http:

在生成 cookie 时使用 HttpOnly 标志有助于降低客户端脚本访问受保护 cookie 的风险(如果浏览器支持)。 https://www.owasp.org/index.php/HttpOnly

我仍然无法看到 express 在哪里设置标头以及如何记录服务器发送的 cookie。

【讨论】:

【参考方案2】:

cookies 不出现在响应中,它们出现在标题中。请查看标题,您应该有一个“Set-Cookie”条目

【讨论】:

如果 set-cookie 标头存在 Chrome 将添加 cookie 标签。 您是否尝试过消除邮递员的 cookie?也许他在邮递员中退回了cookie,因为他正在发送它 是的,我删除了所有 cookie 并创建了一个新请求,以确保他仍然得到它。

以上是关于为啥 Postman 在我的 React 应用程序中接收到 express 会话 cookie 而不是我的 post 请求的主要内容,如果未能解决你的问题,请参考以下文章