Next.js调用PHP后端REST API：如何避免客户端Network标签暴露请求

嘿，这个需求其实很常见——毕竟敏感Token要是出现在客户端Network面板里，那安全性就大打折扣了。既然你已经在用Next.js的getServerSideProps，那咱们可以利用Next.js的服务器端能力来解决这个问题，核心思路就是不让客户端直接和PHP后端通信，而是通过Next.js做中间代理，这样敏感数据只会在服务器端流转，客户端完全看不到。

下面给你两个最实用的方案，根据你的Next.js版本选就行：

方案一：用Next.js API Routes做代理（Pages Router和App Router都适用） #

Next.js的API Routes是运行在服务器端的，相当于你自己的小后端接口。客户端把表单数据发给这个API路由，然后由API路由带着敏感Token去请求PHP后端，这样客户端Network里只会看到和Next.js的通信，看不到转发给PHP的敏感信息。

步骤1：创建API路由文件 #

在pages/api目录下新建一个submit-form.js文件（如果用TypeScript就建.ts）：

// pages/api/submit-form.js
export default async function handler(req, res) {
  // 只接受POST请求
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method Not Allowed' });
  }

  // 从客户端拿到表单数据
  const formData = req.body;

  // 从服务器端环境变量获取敏感Token（不要用NEXT_PUBLIC_前缀，确保客户端拿不到）
  const phpApiToken = process.env.PHP_API_TOKEN;

  try {
    // 服务器端转发请求到PHP后端API
    const phpResponse = await fetch('https://你的PHP后端域名/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${phpApiToken}` // 敏感Token在这里，客户端看不到
      },
      body: JSON.stringify(formData)
    });

    const result = await phpResponse.json();
    // 把PHP后端的响应返回给客户端
    res.status(phpResponse.status).json(result);
  } catch (error) {
    res.status(500).json({ message: '提交失败，请稍后重试' });
  }
}

步骤2：客户端调用这个API路由 #

在你的React表单组件里，提交时直接请求Next.js的API路由，不用带任何敏感数据：

const handleFormSubmit = async (e) => {
  e.preventDefault();
  
  // 收集表单数据
  const formData = {
    username: e.target.username.value,
    email: e.target.email.value,
    // 其他表单字段...
  };

  try {
    const response = await fetch('/api/submit-form', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    });

    const data = await response.json();
    // 处理提交成功后的逻辑，比如提示用户
    alert('提交成功！');
  } catch (error) {
    alert('提交失败，请稍后重试');
  }
};

方案二：用Next.js Server Actions（App Router专属，Next.js 13+） #

如果你用的是Next.js 13+的App Router，那Server Actions会更简洁——它允许你直接在组件里定义服务器端运行的函数，不用单独写API路由。

示例代码 #

// 你的表单组件（App Router下的Client Component）
'use client';

// 定义Server Action，注意要加'use server'指令
async function submitForm(formData) {
  'use server';
  
  // 服务器端获取敏感Token
  const phpApiToken = process.env.PHP_API_TOKEN;

  try {
    const response = await fetch('https://你的PHP后端域名/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${phpApiToken}`
      },
      body: JSON.stringify(formData)
    });

    return await response.json();
  } catch (error) {
    throw new Error('提交失败');
  }
}

// 表单提交逻辑
const FormComponent = () => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = {
      username: e.target.username.value,
      email: e.target.email.value
    };

    try {
      const result = await submitForm(formData);
      alert('提交成功！');
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="用户名" />
      <input type="email" name="email" placeholder="邮箱" />
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;

关键注意事项 #

• 敏感数据存环境变量：一定要把Token这类敏感数据放在Next.js的服务器端环境变量里，不要加NEXT_PUBLIC_前缀，这样客户端永远访问不到。
• 验证请求合法性：可以在API路由或Server Action里加一些验证逻辑，比如检查请求来源、加CSRF令牌，防止恶意请求。
• 服务器端请求不会被客户端捕获：因为Next.js服务器和PHP后端的通信是在服务器端完成的，客户端的Network面板只能看到自己和Next.js之间的请求，完全看不到敏感Token。

这样就能完美解决你的问题啦——用户提交表单时，敏感数据全程在服务器端流转，客户端根本看不到~

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