Fetch请求到PocketBase在终端中失败,但在Postman和浏览器中正常工作 | Next.js13

huangapple go评论60阅读模式
英文:

Fetch request to PocketBase fails from terminal but works in Postman and the browser | Next.js13

问题

我正在使用create-next-app@latest构建一个Next.js应用程序,将PocketBase用作数据库。

我的问题是,我的本地PocketBase实例拒绝来自我的NextJS应用程序的连接,但在使用Postman浏览器获取数据时没有问题。问题似乎与undici库有关,尽管我不确定它是否是问题的真正原因。

只有在尝试连接到localhost时fetch请求似乎才会失败,但任何外部链接,如**google.com**都可以正常工作。

以下是引起错误的代码片段:

async function getNotes(){
    const res = await fetch('http://localhost:8090/api/collections/notes/records');
    const data = res.json();
    return data;
}
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'** npm库时的错误日志(这次的错误日志不包括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'
}

我已经尝试了几乎我能找到的一切,例如:

  1. 更改Node版本并更新本地和全局npm包
  2. 使用第三方库,如'node-fetch'和'axios'连接到数据库。
  3. 在运行PocketBase后,使用PocketBase npm包(ORM)连接到数据库,然后使用fetch API。请注意,管理员面板运行正常。
  4. 在'http://localhost:....'和'http://127.0.0.1:...' URL之间进行切换产生完全相同的结果。
英文:

I'm building a Next.js app using create-next-app@latest with PocketBase as the database.

My Problem is that my local PocketBase instance refuses the connection from my NextJS app, but has no problem retrieving data when I fetch it using Postman or the browser. The issue seems to have to do with the undici library though I'm not certain if its the actual source of the issue.

The fetch request only seems to fail when I try connecting to localhost, but any external links such as google.com work fine.

Here are the code snippets that cause the error

async function getNotes(){
    const res = await fetch('http://localhost:8090/api/collections/notes/records');
    const data = res.json();
    return data;
}
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;
}

Error log when using the built-in 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
  }
}

Error log when using the 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
    }
  }
}

Error log when using the 'node-fetch' npm library (the error log doesn't include Undici this time)

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'
}

I've tried just about everything I could find such as:
1. Changing node versions and updating local and global npm packages
2. Using 3rd party libraries such as 'node-fetch' and 'axios' to connect to the database.
3. Connecting to the database using the PocketBase npm package (ORM) and also using just the fetch API after running PocketBase. Note that the admin panel works fine.
4. Changing between http://localhost:.... and http://127.0.0.1:... urls gives exactly the same results.

答案1

得分: 0

然而,似乎暂时切换到非基于 Chromium 的浏览器是一个有效的解决方法。

这是关于问题的更多信息的 GitHub 问题

英文:

I wasn't able to pin point the source of the issue,

However, it seems that switching to a non-chromium based browser is a valid workaround for the time being

This is the github issue with more information about the problem

答案2

得分: 0

我认为这是由于最近版本的NextJS中行为变化所致。
检查是否为HOSTNAME环境变量设置了值。
如果是,并且它与localhost不同,节点将不会在本地地址(localhost)上打开端口,也不会通过本地IP(127.0.0.1)进行连接。您可以通过将HOSTNAME设置为"localhost"值进行测试。

英文:

I think this is due to the behavior change in recent versions of NextJS.
Check that there is a value set for the HOSTNAME environment variable.
If yes and it is different from localhost, the node will not open the port on the local address (localhost) and there will be no connection through the local IP (127.0.0.1). You can test by setting HOSTNAME with the "localhost" value.

huangapple
  • 本文由 发表于 2023年6月25日 17:48:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76549793.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定