Next. js вызов API на стороне сервера возвращает 500 внутренняя ошибка сервера - PullRequest
Новая
       6

Next. js вызов API на стороне сервера возвращает 500 внутренняя ошибка сервера

1 голос
/ 24 января 2020

Я наконец окунаюсь в мир реакции сервера, используя Далее. js, однако я довольно озадачен этой проблемой.

Я звоню в API из pages/customer-preferences.tsx, используя isomorphic-unfetch

CustomerPreferencesPage.getInitialProps = async () => {
  const res = await fetch(API_URL + '/preference-customer');
  const initialData = await res.json();
  return { initialData };
};

Все отлично работает локально в режиме dev или после сборки и запуска build> start. Чтобы разместить его, я запускаю его из docker контейнера node:10, и когда я запускаю его локально, все тоже хорошо. Эта проблема возникает только после ее развертывания.

Когда я перехожу на / и затем нажимаю ссылку на /customer-preferences, все работает, как и ожидалось. Но если я обновлю sh страницу или загрузлю страницу непосредственно в /customer-preferences, я вижу эту ошибку из Next. js

enter image description here

Так проблема возникает только при попытке сделать вызовы API с сервера, а не с клиента.

Я также настроил для использования простой сервер express, но не уверен, если это необходимо? ! 

const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

При проверке журналов сервера я получаю следующее:

FetchError: request to http://xxx failed, reason: getaddrinfo EAI_AGAIN xxx xxx:80

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 24 января 2020

Мое подозрение связано с тем, что fetch - это не модуль нативного узла, а клиент в браузерах. Итак, если вы переходите с одной страницы на эту страницу; согласно документации; getInitialProps будет вызываться со стороны клиента, делая метод fetch доступным. Ссылка sh гарантирует, что getInitialProps вызывается со стороны сервера.

Вы можете проверить эту теорию, запустив typeof fetch из инспектора браузера и из узла REPL.

Вы лучше вызова метода из компонента или использования стороннего HTTP-клиента, например axios ...

Если вы хотите пропустить вызов метода AJAX из внутреннего интерфейса и вызывать его только из внешнего интерфейса, вы может проверить, вызывается ли метод из внешнего или внутреннего интерфейса, например: 

CustomerPreferencesPage.getInitialProps = async () => {
  if (typeof window === 'undefined') {
    // this is being called from the backend, no need to show anything
    return { initialData: null };
  }

  const res = await fetch(API_URL + '/preference-customer');
  const initialData = await res.json();
  return { initialData };
};
...