Next.js13本地请求PocketBase失败，Postman与浏览器可正常访问

我用create-next-app@latest构建了Next.js应用，采用PocketBase作为数据库。

本地PocketBase实例拒绝NextJS应用的连接，但通过Postman或浏览器能正常获取数据。仅连接localhost时fetch请求失败，访问google.com等外部链接完全正常，怀疑和undici库有关但不确定。

问题代码片段 #

原生fetch API写法 #

async function getNotes(){
    const res = await fetch('http://localhost:8090/api/collections/notes/records');
    const data = res.json();
    return data;
}

PocketBase ORM写法 #

import PocketBase from 'pocketbase';

async function getNotes(){
        const pb = new PocketBase('http://127.0.0.1:8090')
        const list = await pb.collection('notes').getList(1, 100, {});
        return list;
}

错误日志 #

内置fetch API报错 #

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:8090
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 8090
  }
}

PocketBase ORM报错 #

ClientResponseError 0: Something went wrong while processing your request.
    at new ClientResponseError (webpack-internal:///(sc_server)/./node_modules/pocketbase/dist/pocketbase.es.mjs:161:23)
    at eval (webpack-internal:///(sc_server)/./node_modules/pocketbase/dist/pocketbase.es.mjs:1619:39)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getNotes (webpack-internal:///(sc_server)/./app/notes/page.tsx:21:22)
    at async NotesPage (webpack-internal:///(sc_server)/./app/notes/page.tsx:31:19) {
  url: '',
  status: 0,
  response: {},
  isAbort: false,
  originalError: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11576:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    cause: Error: connect ECONNREFUSED 127.0.0.1:8090
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1574:16)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      errno: -111,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 8090
    }
  }
}

node-fetch库报错（未使用Undici） #

FetchError: request to http://127.0.0.1:8090/api/collections/notes/records?page=1&perPage=30 failed, reason: connect ECONNREFUSED 127.0.0.1:8090
    at ClientRequest.eval (webpack-internal:///(sc_server)/./node_modules/node-fetch/src/index.js:124:20)      
    at ClientRequest.emit (node:events:511:28)
    at Socket.socketErrorListener (node:_http_client:495:9)
    at Socket.emit (node:events:511:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED',
  erroredSysCall: 'connect'
}

已尝试的解决方案 #

• 切换Node版本并更新本地及全局npm包
• 使用node-fetch、axios等第三方库连接数据库
• 通过PocketBase npm包（ORM）及原生fetch API连接数据库，管理面板可正常使用
• 切换http://localhost:...与http://127.0.0.1:...地址，结果一致

解决方案 #

1. 区分运行环境（客户端/服务器端） #

如果代码在服务器端组件中运行，Docker环境下localhost指向容器自身而非宿主机，需将PocketBase地址改为宿主机局域网IP（如http://192.168.x.x:8090）；若用Docker-compose，可直接用服务名访问。

2. 修改PocketBase绑定地址 #

启动PocketBase时指定监听所有网络接口，避免仅绑定127.0.0.1：

./pocketbase serve --http 0.0.0.0:8090

3. 检查端口占用与防火墙 #

确认8090端口未被其他进程占用，且本地防火墙未拦截该端口：

# Windows查看端口占用
netstat -ano | findstr :8090

# Linux/macOS查看端口占用
lsof -i :8090

4. 配置Next.js跨域规则 #

在next.config.js中添加跨域允许配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: 'GET, POST, PUT, DELETE, OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization' },
        ],
      },
    ]
  },
}

module.exports = nextConfig

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