React(Vite)首页Axios 404错误及路由跳转浏览器兼容问题

1. 检查Axios请求路径与配置 #

• 确认Axios是否配置了正确的baseURL，避免请求前端端口（5173）的不存在接口：

  // 创建Axios实例时设置
  const axiosInstance = axios.create({
    baseURL: 'http://localhost:4000'
  })
  

• 如果使用Vite代理，确保vite.config.js中的代理配置正确：

  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:4000',
          changeOrigin: true
        }
      }
    }
  })
  

2. 将重定向逻辑移至路由守卫 #

不要在Home组件内部处理重定向，改用React Router的路由守卫提前拦截未登录请求，避免渲染Home组件时触发无效Axios请求：

// 路由守卫组件
function RequireAuth({ children }) {
  const navigate = useNavigate();
  // 从localStorage或AuthContext获取认证状态
  const isLoggedIn = localStorage.getItem('token') !== null;

  useEffect(() => {
    if (!isLoggedIn) {
      // 替换历史记录，避免用户回退到首页
      navigate('/login', { replace: true });
    }
  }, [isLoggedIn, navigate]);

  return isLoggedIn ? children : null;
}

// 路由配置
<Routes>
  <Route path="/" element={
    <RequireAuth>
      <Home />
    </RequireAuth>
  } />
  <Route path="/login" element={<Login />} />
</Routes>

未登录状态下会直接重定向到登录页，从根源避免无效请求导致的404。

3. 完善Express的CORS配置 #

确保cors配置覆盖前端origin和凭证需求，避免跨域或权限问题：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:5173', // 必须指定具体前端地址，通配符会导致凭证失效
  credentials: true, // 允许携带cookie或认证header
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
}));

4. 验证后端路由匹配 #

确认前端请求的接口路径与后端路由完全一致，比如前端请求/api/check-auth，后端必须有对应路由：

app.get('/api/check-auth', (req, res) => {
  // 认证逻辑：检查token有效性
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) {
    return res.status(401).json({ message: '未认证' });
  }
  // 其他验证逻辑...
  res.status(200).json({ message: '已认证' });
});

后端无对应路由会直接返回404，这是常见错误点。

5. 清除浏览器缓存 #

Firefox可能缓存了旧的请求状态，尝试清除浏览器缓存（Ctrl+Shift+Delete），或在开发模式下禁用缓存后测试重定向功能。

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