ReactJS cookie 库无法识别 Express-Session Cookie

Question

我试图查看我所有的浏览器 cookie，但我注意到 express-session 创建的 connect.sid 没有被我尝试过的各种 React cookie 库识别想知道为什么会这样吗？这与设置的其他 cookie 有明显不同吗？我错过了什么吗？

以下是我在快递端设置服务器的方式：

const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')
const flash = require('connect-flash')
const routes = require('./controllers/routes')
// Passport
const passport = require('passport')

// Session Management
const session = require('express-session')
const redis = require('redis');
const RedisStore = require('connect-redis')(session);
const redisClient = redis.createClient({
    host: process.env.REDIS_HOST || 'localhost',
    port: process.env.REDIS_PORT || '6379',
    url: process.env.REDIS_URL || ''
});

redisClient.on_connect("error", function(error){
    console.error(error);
})

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
    
app.prepare()
.then(() => {
  const server = express()

  // Setting proxy for session handlng that is required for non-dev servers
  if (!dev){
      server.set('trust poxy', 1)
  }

  console.log(process.env.DB_DATABASE)
  
  // Session Management
  server.use(session({
      store: new RedisStore({ client: redisClient }),
      secret: process.env.SESSION_SECRET,
      saveUninitialized: false,
      resave: false,
      cookie: {
          secure: process.env.SESSION_SECURE || false,
          httpOnly: true,
      }
  }))

  // Request notifications. Must be used prior to routes
  server.use(flash());

  // Passport middleware
  server.use(passport.initialize())
  server.use(passport.session())
//   Form body parsing
  server.use(bodyParser.json())
  server.use(bodyParser.urlencoded({extended: true}))
  
//   server.use(helmet()) Enable at later date

// ExpressJS Routes
  server.use(routes);

    // mount the router on the app 
    // Any routes that aren't handled by ExpressJS are handled by NextJS
  server.get('*', (req, res) => {
    return handle(req, res)
  })
    
  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

以下是我尝试在 React 前端访问浏览器 cookie（尝试使用 nookies and js-cookie）的方式：

import {parseCookies} from 'nookies'
import Cookies from 'js-cookie'

const AppSession = ({ children }) => {

        console.log(parseCookies())
        console.log(Cookies.get())
        console.log(Cookie.get())
}

export default AppSession;

这是记录的内容：

{_ga: "GA1.1.630490776.1602939000"}
{_ga: "GA1.1.630490776.1602939000"}

这是我的浏览器 cookie：

Answer 1

您使用 httpOnly attribute. See Restrict access to cookies

设置了 connect.sid 会话 cookie

A cookie with the HttpOnly attribute is inaccessible to the JavaScript Document.cookie API; it is sent only to the server. For example, cookies that persist server-side sessions don't need to be available to JavaScript and should have the HttpOnly attribute. This precaution helps mitigate cross-site scripting (XSS) attacks.

这就是为什么您无法在浏览器中使用 js-cookie 包获取或设置它的原因。

ReactJS cookie 库无法识别 Express-Session Cookie

Express-Session Cookie not recognized by ReactJS cookie Library

cookies

session-cookies

node.js

express

reactjs