使用React和Axios访问Express服务器路由时出现Error 404

按顺序排查以下关键点：

1. 修复前端代码的语法错误 #

你的fetchUsers函数存在两处语法问题，会直接导致请求异常：

• 将attempt改为try（JavaScript中无attempt关键字）
• 请求头的Authorization字段末尾缺少逗号，破坏对象语法结构

修正后的前端代码：

useEffect(() => {
  fetchUsers(); // 注意：原代码中useEffect调用的是searchUsers，但定义的函数是fetchUsers，需统一函数名
}, [connected]);

const fetchUsers = async () => {
  try {
    const token = localStorage.getItem('token');
    const response = await axios.get('http://localhost:3000/api/auth/me', {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json'
      }
    });
    setUsers(response.data);
  } catch (error) {
    console.error('Error getting users:', error);
    console.error('Axios error:', error.response);
  }
};

2. 检查后端路由挂载逻辑 #

你在server.js中配置了app.use('/api', require('./routes/auth'))，这意味着auth.js内的所有路由会自动带上/api前缀：

• 若auth.js内路由为router.get('/auth/me', ...)，则实际访问路径为/api/auth/me，与前端请求路径匹配
• 若auth.js内路由为router.get('/me', ...)，则实际路径为/api/me，此时前端请求/api/auth/me必然404

另外，你直接在server.js中添加的测试路由app.get('/api/auth/me')，需注意路由顺序：Express按代码顺序匹配路由，若该测试路由放在app.use('/api', auth)之后，且auth.js内有/api下的404兜底逻辑，测试路由会被优先匹配的兜底逻辑覆盖，永远不会生效。需将测试路由移至app.use('/api', auth)之前。

3. 检查端口冲突问题 #

React开发服务器默认使用3000端口，若你的Express服务器也占用3000端口，会导致Express服务无法正常启动，自然返回404。解决方式二选一：

• 将Express端口改为其他值（如5000），前端请求地址改为http://localhost:5000/api/auth/me
• 在React项目的package.json中添加代理配置：

  "proxy": "http://localhost:5000"
  

  之后前端可直接请求/api/auth/me，无需写完整域名

4. 排查跨域问题 #

前后端端口不同时会触发跨域拦截，浏览器可能将跨域错误伪装成404。需给Express配置CORS中间件：

1. 安装依赖：

   npm install cors
   

2. 在server.js中添加配置：

   const cors = require('cors');
   app.use(cors());
   

5. 直接测试后端路由 #

绕过前端，用Postman或curl直接请求http://localhost:xxx/api/auth/me：

• 若直接请求也返回404，问题出在后端路由配置
• 若直接请求正常，问题出在前端请求逻辑或跨域配置

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