NextJS + TypeScript登录功能异常：Axios网络错误求助

1. 优先排查跨域问题 #

Postman能正常请求但前端不行，90%是跨域限制导致：

• 后端配置CORS：如果后端是Node/Express，直接用cors中间件，开发环境允许前端域名（如http://localhost:3000），生产环境指定允许的域名；如果是Java Spring Boot，在Controller或全局配置@CrossOrigin注解。
• 用Next.js API路由转发时，服务器端请求不存在跨域问题，但要确保后端地址是服务器可访问的（比如本地后端用localhost，Docker容器部署的话替换为host.docker.internal）。

2. 核对Axios请求配置细节 #

Postman能通说明后端接口正常，前端请求可能存在配置差异：

• 检查请求头：确保Content-Type设置为application/json，Axios默认会自动处理，但手动配置更稳妥：

  await axios.post('/api/login', formData, {
    headers: { 'Content-Type': 'application/json' }
  });
  

• 核对参数结构：确认前端传给Axios的参数名、嵌套层级和后端要求完全一致（比如后端要username，别写成userName）。
• 确认请求方法：别把POST写成GET，或者API路由里没处理POST请求。

3. 修复Next.js API路由转发的常见问题 #

如果用API路由转发请求，比如pages/api/login.ts，注意以下细节：

// pages/api/login.ts
import axios from 'axios';
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') return res.status(405).json({ msg: '仅支持POST请求' });
  
  try {
    // 用完整的后端地址，不要用相对路径
    const resp = await axios.post('http://localhost:8080/api/auth/login', req.body);
    res.status(resp.status).json(resp.data);
  } catch (err) {
    // 打印完整错误信息用于调试
    console.error('转发请求失败:', err);
    res.status(500).json({ msg: '登录失败', err: (err as Error).message });
  }
}

前端调用时直接用/api/login作为请求地址即可。

4. 调试Axios错误详情 #

不要只看“网络错误”，捕获并打印完整错误信息定位问题：

try {
  const resp = await axios.post('/api/login', formData);
  // 登录成功逻辑：存Token+跳转
  localStorage.setItem('authToken', resp.data.token);
  router.push('/dashboard');
} catch (err) {
  console.error('登录错误详情:', err);
  if (axios.isAxiosError(err)) {
    console.error('响应数据:', err.response?.data);
    console.error('请求配置:', err.config);
    console.error('错误原因:', err.message);
  }
}

如果是请求未到达后端，大概率是跨域或地址错误；如果有后端响应，说明是业务逻辑错误（比如参数校验失败）。

5. Next.js 13+ App Router注意事项 #

• 仅在客户端组件中发起Axios请求（加'use client'指令），服务器组件无法直接发起客户端请求。
• 客户端可访问的环境变量要以NEXT_PUBLIC_开头，比如NEXT_PUBLIC_BACKEND_URL=http://localhost:8080，避免硬编码地址。

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