NextJS14中使用Axios为shadcn DataTable取数时遇连接拒绝错误

问题场景 #

使用NextJS 14、shadcn UI、Prisma和Axios开发网站，尝试展示DataTable时触发connect ECONNREFUSED ::1:80错误，无法正常获取数据渲染表格。

错误原因 #

1. 服务器组件的Axios路径问题：你的页面是服务器组件（async函数组件），在服务器端执行时，Axios调用/api/data会默认使用http://localhost:80作为基础URL，但NextJS开发服务器默认运行在3000端口，导致连接被拒绝。
2. 不必要的API路由中转：服务器组件可以直接与Prisma交互，无需通过API路由发起HTTP请求，这种中转不仅增加复杂度，还会引发上述端口匹配问题。

解决方案 #

方案1：直接在服务器组件中调用Prisma（推荐） #

删除多余的API路由调用，直接在页面组件中执行Prisma查询，这是NextJS服务器组件的最佳实践：

修改页面组件代码：

import Link from 'next/link';
import { Warga, columns } from './columns';
import { DataTable } from './data-table';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from '@/components/ui/menubar';
import { AlignRight } from 'lucide-react';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function getData(): Promise<Warga[]> {
  // 直接在服务器组件中执行Prisma查询
  return await prisma.warga.findMany();
}

export default async function DataPage() {
  const data = await getData();
  return (
    <>
      <div className='container mx-auto my-8 flex-col md:flex'>
        {/* Header */}
        {/* Content */}
        <div className='flex-1 space-y-4 md:p-8 pt-6'>
          <Tabs
            defaultValue='rt01'
            className='space-y-4'
          >
            <TabsList>
              <TabsTrigger value='rt01'>RT 01</TabsTrigger>
              <TabsTrigger value='rt02'>RT 02</TabsTrigger>
              <TabsTrigger value='rt03'>RT 03</TabsTrigger>
              <TabsTrigger value='rt04'>RT 04</TabsTrigger>
            </TabsList>
            {/* Overview tab */}
            <TabsContent
              value='rt01'
              className='space-y-4'
            >
              <DataTable
                columns={columns}
                data={data}
              />
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </>
  );
}

方案2：修正Axios的基础URL（若必须保留API路由） #

如果你需要保留API路由，需为Axios指定正确的基础URL，匹配NextJS服务器的端口：

修改getData函数：

async function getData(): Promise<Warga[]> {
  // 开发环境用3000端口，生产环境替换为实际域名
  const baseURL = process.env.NODE_ENV === 'development' 
    ? 'http://localhost:3000' 
    : 'https://your-production-domain.com';
  
  const res = await axios.get('/api/data', { baseURL });
  return res.data;
}

额外注意事项 #

• 确保已正确配置Prisma数据库连接，执行过npx prisma generate和npx prisma migrate dev命令。
• 服务器组件中无需通过Axios调用内部API，直接执行业务逻辑是更高效的实现方式。

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