Next.js服务端发起外部API POST请求方法咨询

你可以通过Next.js的API Routes创建一个服务端中间接口，让客户端请求这个内部接口，再由服务端去调用外部登录API，这样外部API地址就不会暴露在浏览器控制台里。

步骤1：创建服务端API路由 #

在你的Next.js项目中，新建app/api/login/route.ts文件，编写服务端POST请求逻辑：

// app/api/login/route.ts
export async function POST(request: Request) {
  // 获取客户端传来的表单数据
  const formData = await request.json();

  try {
    // 服务端调用外部登录API（地址仅存在于服务端，客户端不可见）
    const response = await fetch(process.env.EXTERNAL_API_URL!, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    const data = await response.json();
    // 将外部API的响应原封不动返回给客户端
    return Response.json(data, { status: response.status });
  } catch (error) {
    return Response.json({ error: '登录请求处理失败' }, { status: 500 });
  }
}

环境变量配置（可选但推荐） #

在项目根目录的.env.local文件中添加外部API地址，避免硬编码：

EXTERNAL_API_URL=http://localhost:8080/api/auth/signin

步骤2：修改客户端登录组件 #

调整你的LoginForm组件中的handleSubmit函数，把请求目标改成刚才创建的内部API路由：

// 修改handleSubmit中的fetch部分
const handleSubmit = async (event: any) => {
  event.preventDefault(); 

  try {
    // 请求自己的Next.js API路由
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    });

    const responseData = await response.json();
    
    // 后续登录成功逻辑保持不变
    if (responseData) {
      console.log('Login effettuato con successo!', responseData);
      localStorage.setItem('accessToken', responseData.token);
      localStorage.setItem('username', responseData.username);
      localStorage.setItem('isLoggedin', 'true');
      
      toast({
        description: "Login has been successful"
      })
      router.push('/');
      
      setFormData({
        username: '',
        password: ''
      });
    } else {
      console.error('La risposta dall\'API non è come previsto:', responseData);
      setError('Credenziali non valide. Si prega di riprovare.');
    }

  } catch (error) {
    console.error('Errore durante la registrazione:', error);
  }
};

核心优势 #

• 隐藏敏感地址：外部API地址仅存在于服务端代码/环境变量中，客户端无法获取，彻底避免地址窃取风险。
• 可扩展逻辑：可以在API路由中添加参数校验、请求日志、权限拦截等额外逻辑，提升系统安全性。
• 不影响交互：登录表单依然是客户端组件（保留"use client"），完全不影响用户的表单操作体验。

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