如何在NextJS的NodeJS服务器端发起请求至内部后端服务

我有一个运行在Node.js服务器上的Next.js应用，作为三层架构的前端。当前代码中handleSubmit里的fetch是从浏览器向后端发起请求，但后端部署在仅内部可访问的网络，浏览器无法直接访问。需要实现从Node.js服务器本身而非客户端浏览器向后端发起请求。

原组件代码：

'use client';

import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select, { SelectChangeEvent }  from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';

import { useState } from 'react'

import { storeData } from '../../constants';

export default function ReviewPage(){
    const [ selectedStore, setSelectedStore ] = useState('');

    const handleChange = (event: SelectChangeEvent) => {
        setSelectedStore(event.target.value as string);
    }

    const handleSubmit = async () => {
        const response = fetch("some_backend/path")
    }

    return (
        <>
        {/* FORM */}
        <Grid container spacing={2} justifyContent="center">
            <Grid item xs={6}>
                <FormControl fullWidth>
                    <InputLabel id="demo-simple-select-label">Store</InputLabel>
                    <Select
                        labelId="demo-simple-select-label"
                        id="demo-simple-select"
                        label="store"
                        value={selectedStore}
                        onChange={handleChange}
                    >
                        {/* Map the stores to populate the Select field */}
                        {storeData.map(store => <MenuItem key={store.id} value={store.name}>{store.name}</MenuItem>)}  
                    </Select>
                </FormControl>
            </Grid>
        </Grid>

        <Grid container justifyContent="center">
            <Grid item>
                <Button onClick={handleSubmit} variant="contained">Analyse</Button>
            </Grid>
        </Grid>

        {/* Results */}
        <Grid container>
            <Grid item xs={12}>
                <Paper elevation={3} sx={{padding: "15px"}}>
                    Why do we use it?
                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                </Paper>
            </Grid>
            <Grid item xs={12}>
                <Paper elevation={3} sx={{padding: "15px"}}>
                    Why do we use it?
                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                </Paper>
            </Grid>
        </Grid>
        </>
    )
} 

解决方案：用Next.js API路由做服务器端代理 #

Next.js的API路由运行在服务器环境，能够直接访问内部网络的后端服务，以此作为中间层转发请求即可解决浏览器无法访问内部后端的问题。

1. 创建服务器端API路由 #

根据你的Next.js版本，创建对应的API路由文件：

• App Router（Next.js 13+）：在app/api/analyze/route.ts
• Pages Router：在pages/api/analyze.ts

示例代码（App Router版本）：

// app/api/analyze/route.ts
export async function POST(request: Request) {
  // 接收客户端传来的参数
  const { selectedStore } = await request.json();

  // 服务器端直接请求内部后端
  const backendResponse = await fetch("http://内部后端地址/some_backend/path", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // 若后端需要鉴权，可在此添加认证头
    },
    body: JSON.stringify({ selectedStore }),
  });

  const resultData = await backendResponse.json();
  // 将后端结果返回给客户端
  return Response.json(resultData);
}

2. 修改客户端组件的请求逻辑 #

把原来直接请求内部后端的代码，改为请求自己创建的API路由：

// ReviewPage组件中的handleSubmit修改如下
const handleSubmit = async () => {
  if (!selectedStore) return;

  try {
    const response = await fetch("/api/analyze", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ selectedStore }),
    });

    const result = await response.json();
    // 这里可以处理返回结果，比如更新页面的结果展示区域
    console.log("分析结果:", result);
  } catch (error) {
    console.error("请求失败:", error);
  }
};

额外说明 #

• API路由完全运行在服务器端，不受浏览器跨域限制，也能访问内部私有网络资源
• 可以在API路由中添加鉴权校验、请求日志、错误处理等逻辑，提升整体安全性和可维护性
• 如果需要复用内部后端的请求逻辑，可封装成服务器端工具函数，在多个API路由中调用

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