Next.js 14用Axios发POST请求报错，Postman可正常请求

1. 优先排查跨域问题 #

Postman不受浏览器同源策略限制，但前端页面会被该策略拦截请求。后端必须配置CORS允许前端域名访问：

• 若后端基于Express开发，安装cors包后添加配置：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // Next.js默认运行端口
  credentials: true
}));

• 测试阶段可临时设置origin: '*'确认是否为跨域问题，但生产环境禁止这么做。

2. 修正Axios请求写法 #

确保已安装Axios，同时优化请求配置并打印完整错误信息：

import axios from 'axios';

const POST = () => {
  const PostRequest = async () => {
    try {
      // 配置基础URL减少重复代码
      const api = axios.create({ baseURL: 'http://localhost:3001' });
      const response = await api.post('/CreateUser', {
        nameOfUser: "mostafa",
        ageOfUser: 22,
        phoneNumber: 201003443454,
        EmailOfUser: "mostafa@gmail.com",
      });
      console.log('请求成功:', response.data);
    } catch(error) {
      // 打印完整错误而非仅消息，便于定位问题
      console.error('请求失败:', error);
      console.error('错误详情:', error.response?.data || error.request || error.message);
    }
  }

  return <button onClick={PostRequest}>POST</button>
}

export default POST;

3. 正确使用Fetch发送请求 #

Fetch需要手动处理请求头和响应状态，完整写法如下：

const POST = () => {
  const PostRequest = async () => {
    try {
      const response = await fetch('http://localhost:3001/CreateUser', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          nameOfUser: "mostafa",
          ageOfUser: 22,
          phoneNumber: 201003443454,
          EmailOfUser: "mostafa@gmail.com",
        }),
      });
      
      // 主动判断HTTP状态是否正常
      if (!response.ok) {
        throw new Error(`HTTP错误状态: ${response.status}`);
      }
      
      const data = await response.json();
      console.log('请求成功:', data);
    } catch(error) {
      console.error('请求失败:', error);
    }
  }

  return <button onClick={PostRequest}>POST</button>
}

export default POST;

4. 用Next.js API路由做代理（推荐） #

通过Next.js的API路由转发请求，彻底避开跨域问题：

1. 在app/api/proxy-create-user/route.js创建代理文件：

import axios from 'axios';
import { NextResponse } from 'next/server';

export async function POST(request) {
  try {
    const body = await request.json();
    const response = await axios.post('http://localhost:3001/CreateUser', body);
    return NextResponse.json(response.data);
  } catch(error) {
    return NextResponse.json({ error: error.message }, { status: error.response?.status || 500 });
  }
}

2. 前端组件请求本地代理路由：

const PostRequest = async () => {
  try {
    const response = await fetch('/api/proxy-create-user', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        nameOfUser: "mostafa",
        ageOfUser: 22,
        phoneNumber: 201003443454,
        EmailOfUser: "mostafa@gmail.com",
      }),
    });
    const data = await response.json();
    console.log('请求成功:', data);
  } catch(error) {
    console.error('请求失败:', error);
  }
}

5. 其他排查要点 #

• 确认后端服务确实在localhost:3001正常运行，无端口冲突
• 查看浏览器控制台的Network标签，分析请求的状态码、请求头和响应详情
• 关闭浏览器广告拦截或隐私插件，部分插件会拦截本地请求

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