使用 fetch 和 React 将授权标头和 JWT 令牌传递到后端时遇到问题

Question

我正在学习一个试图完成全栈项目的课程，在尝试创建登录功能时，我在两个方面遇到了麻烦：使用 JWT 令牌将我的授权请求标头发送到后端，并实际附加令牌到标题。每当我发送 POST 请求时，都会正确生成令牌，并且也会创建授权请求（当我检查时，我可以在网络选项卡中看到它），但是当我尝试通过读取身份验证中间件中的令牌来解码时通过标头的令牌，它表示标头未定义。

这是我的 POST 请求代码：

fetch('http://localhost:4000/api/auth/login', {
            method: 'POST',
            headers: {
            'Content-Type': 'application/json',
            'Authorization': "Bearer ${token}",
            },
            body: JSON.stringify({
                email: email,
                password: password
            }),
        }).then( async (res) => {
            // other code here
        })

这在我的登录函数末尾设置令牌：

const token = jwt.sign(
    { user_id: user.user_id },
    'RANDOM_TOKEN_SECRET',
    { expiresIn: '24h'}
);
console.log(req.headers);
res.status(200).json({
    user_id: user.user_id,
    token: token
});

我使用console.log(req.headers);查看请求标头显示的内容，并包含授权。这是日志返回的内容：

{
  host: 'localhost:4000',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101
Firefox/132.0',
  accept: '*/*',
  'accept-language': 'en-US,en;q=0.5',
  'accept-encoding': 'gzip, deflate, br, zstd',
  referer: 'http://localhost:3000/',
  'content-type': 'application/json',
  authorization: 'Bearer token',
  'content-length': '43',
  origin: 'http://localhost:3000',
  connection: 'keep-alive',
  'sec-fetch-dest': 'empty',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'same-site',
  priority: 'u=0'
}

这是我的身份验证中间件：

module.exports = (req, res, next) => {
    try {
        console.log(req.headers);
        const token = req.headers.authorization;
        const decodedToken = jwt.verify(token, 'RANDOM_TOKEN_SECRET');
        const user_id = decodedToken.user_id;
        req.auth = { user_id };
        if (req.body.user_id && req.body.user_id !== user_id) {
   
            throw 'Invalid user ID';
        }
        else {
       
            next();
        }
    } 
    catch {
        res.status(401).json({
            error: new Error('Invalid request')
        });
    }
};

这就是我遇到问题的地方：授权标头消失了。我的中间件中的控制台日志不再包含授权标头，我不确定为什么，并且我不确定是否有其他方法将令牌传递给中间件。

Answer 1

使用模板文字 不要使用“Bearer ${token}”，而是使用

Bearer ${token}