无法获取用户订单：出现401（未授权）错误

我正在开发一款支持用户查看订单的React应用，已采用JSON Web Tokens（JWT）实现用户认证，但在获取用户订单时持续出现401（未授权）错误。

React组件代码 #

// UserOrders.jsx

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { format } from 'date-fns';
import Cookies from 'js-cookie';

function UserOrders() {
  const [order, setOrder] = useState([]);

  useEffect(() => {
    const fetchOrder = async () => {
      try {
        const token = Cookies.get('token');
        if (!token) {
          console.error('No token found');
          return;
        }

        const response = await fetch('http://localhost:4000/api/v1/orders/me', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`,
          },
        });

        if (response.ok) {
          const data = await response.json();
          console.log(data.order);
          setOrder(data.order);
        } else {
          console.error('Failed to fetch user orders');
        }
      } catch (error) {
        console.error('Error fetching user orders', error);
      }
    };

    fetchOrder();
  }, []);

  // ... rest of the component
}

export default UserOrders;

服务器端代码 #

// server.js

const orderRouter = require('express').Router();
const jwt = require('jsonwebtoken');

orderRouter.get("/me", isAuthenticated, async (req, res) => {
  const token = req.cookies.token;

  try {
    if (!token) {
      return res.status(401).send("Unauthorized: No token found");
    }

    const decodedToken = jwt.verify(token, 'your-secret-key');
    const userId = decodedToken.userId;

    const order = await Orders.find({ user: userId });
    res.json({ order });
  } catch (error) {
    res.status(401).send("Unauthorized: Invalid token");
  }
});

已执行的排查步骤 #

• 检查Token是否存在
• 确认Token在Authorization请求头中正确发送
• 服务器端已对Token进行解码与验证

问题分析与解决方法 #

1. Token读取方式不匹配
   前端将Token放在Authorization请求头中，但后端却从req.cookies.token读取，两者不统一导致后端拿不到有效Token。

   • 解决：修改后端代码，从请求头提取Token：

     const authHeader = req.headers.authorization;
     if (!authHeader || !authHeader.startsWith('Bearer ')) {
       return res.status(401).send("Unauthorized: No token found");
     }
     const token = authHeader.split(' ')[1];
     

2. CORS跨域配置问题
   前后端跨域时，需确保允许携带认证信息：

   • 前端fetch请求添加credentials: 'include'：

     const response = await fetch('http://localhost:4000/api/v1/orders/me', {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${token}`,
       },
       credentials: 'include'
     });
     

   • 后端CORS配置开启凭证支持（以cors包为例）：

     const cors = require('cors');
     app.use(cors({
       origin: 'http://localhost:3000', // 替换为你的前端地址
       credentials: true
     }));
     

3. Token验证密钥不一致
   后端验证用的密钥'your-secret-key'必须与生成Token时使用的密钥完全一致，否则会验证失败返回401。

4. isAuthenticated中间件冲突
   路由中使用的isAuthenticated中间件可能已完成Token验证，或中间件逻辑错误导致提前返回401。可暂时注释该中间件测试，确认是否为中间件问题。

内容的提问来源于stack exchange，提问作者dgdev