req.cookies.token 在 express js（MERN 堆栈）中未定义

Question

我正在使用一个中间件，我必须检查用户是否经过身份验证，但是当我在前端已经有一个 cookie 时，我无法从 react to express js 中获取 cookie，如下图所示：

这是我的 express js 代码

require("dotenv").config();
const port = process.env.PORT || 5050;
const express = require("express");
const app = express();
const cors = require("cors");
const cookieParser = require("cookie-parser");
const mongoose = require("mongoose");
const { authenticate } = require("/controllers/user");
const Post = require("/models/post");

// mongodb connection

app.use(cookieParser());
app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
}))
app.use(express.json());
app.use(express.urlencoded({ extended: true }));



app.get("/api/post/:slug", authenticate , async (req, res) => {
    const slug = req.params.slug;
    const post = await Post.findOne({ slug })
    res.send(post);
});

app.listen(port, () => {
    console.log("Blog server is running!!");
})

这里我有验证中间件的代码

const authenticate = async (req, res, next)  => {
  console.log(req.cookies["token"])
  next();
}

预期的代码应该在控制台中记录token cookie。但是我在 express js 控制台中有 undefined 像这样！

下面我给你看前端代码

import { useParams } from 'react-router-dom'
export default function Post() {
 const [post, setPost] = useState([]);
 const loadPost = async () => {
    const { slug } = useParams();
    const all_posts = await fetch(`http://localhost:5000/api/post/${slug}`)
    const res = await all_posts.json();
    setPost([res]);
 }
  useEffect(() => {
    loadPost();
  }, [])
  return (
    <>
     ...///
    </>
  )
}

Answer 1

你不能用这种方式处理，因为当我们使用 Express 和 React 或任何其他前端和后端分开工作的应用程序时，我们会将身份验证令牌存储在本地存储中。 请看下面的例子：

require("dotenv").config();
const port = process.env.PORT || 5050;
const express = require("express");
const app = express();
const cors = require("cors");
const mongoose = require("mongoose");
const { authenticate } = require("/controllers/user");
const Post = require("/models/post");

// mongodb connection

app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
}))
app.use(express.json());
app.use(express.urlencoded({ extended: true }));



app.get("/api/post/:slug", authenticate , async (req, res) => {
    const slug = req.params.slug;
    const post = await Post.findOne({ slug })
    res.send(post);
});

app.listen(port, () => {
    console.log("Blog server is running!!");
})

身份验证中间件：

const jwt = require('jsonwebtoken')

module.exports = {
  authenticate: async (req, res, next) => {
    try {
      const { token } = req.headers
      if (!token) return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, 'Expected a bearer token')
      const [authType, auth] = token.trim().split(' ')
      if (authType !== 'Bearer') return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, 'Expected a bearer token')

      jwt.verify(auth, process.env.TOKEN_SECRET, function (err, decoded) {
        if (err) return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, err, true)
        if (decoded.loggedInUser) {
          req.user = decoded.loggedInUser
          next()
        } else {
          return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, 'Invalid Token')
        }
      })
    } catch (error) {
      return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, error, true)
    }
  }
}

并且在前端（React 应用程序）中，我们会将令牌存储在本地存储中以持久保存，当用户刷新页面时，它不会更改/删除，直到您自己删除令牌。 React 应用代码：

import { useParams } from 'react-router-dom'
export default function Post() {
 const [post, setPost] = useState([]);
 const token = localstorage.getItem('token')
 const loadPost = async () => {
    const { slug } = useParams();
    const all_posts = await fetch(`http://localhost:5000/api/post/${slug}`,{
    headers: new Headers({
        'token': token, 
        'Content-Type': 'application/x-www-form-urlencoded'
    }
    })
    const res = await all_posts.json();
    setPost([res]);
 }
  useEffect(() => {
    loadPost();
  }, [])
  return (
    <>
     ...///
    </>
  )
}