GatsbyJS/ReactJS неправильно проксирует запросы

Вот некоторый контекст. У меня есть сайт ReactJS, созданный с помощью Gatsby. Этот сайт полностью статичен и не имеет бэкенда. Недавно я работал над интеграцией с серверной частью, так как хотел сделать кое-что с данными с помощью GitHub API. В любом случае, я работал над созданием собственного внутреннего API с помощью NodeJS, а затем проксировал внешние запросы (используя fetch API).

Внешний интерфейс во время разработки находится на локальном хосте: 8000, а внутренний — на локальном хосте: 5000. Это мой gatsby-config.js файл. У него есть некоторые другие биты, не связанные с этим вопросом, но бит прокси находится внизу:

module.exports = {
  siteMetadata: {
    title: "Reece Mercer",
    description: "Personal website"
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'Reece Mercer',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/assets/images/website-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-sass',
    'gatsby-plugin-offline',
    'gatsby-plugin-favicon',
    {
        resolve: 'gatsby-source-filesystem',
        options: {
            path: `${__dirname}/src/blog_posts`,
            name: 'blog_posts'
        }
    },
    'gatsby-transformer-remark'
  ],
  proxy: {
    prefix: "/myRepoAPI",
    url: "http://localhost:5000",
  },
}

По сути, любые запросы, сделанные из внешнего интерфейса и предназначенные для /myRepoAPI/anything, должны быть проксированы из внешнего интерфейса в бэкэнд. Я использовал Postman для проверки серверной части, и эта конечная точка работает так, как должна.

Вот вызов fetch, который я использовал во внешнем компоненте React:

componentDidMount(){
    fetch('/myRepoAPI/hello')
    .then(res => console.info(res))
}

Теперь анализируем этот журнал консоли:

Response {type: "basic", url: "http://localhost:8000/myRepoAPI/hello", redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:8000/myRepoAPI/hello"
__proto__: Response

Значение url находится на локальном хосте: 8000, а не 5000. Прокси не работал. Я пробовал разные комбинации маршрутов, трейлинг / и даже пробовал расширенный метод прокси developMiddleware. Кажется, ничто не заставляет его работать так, как должно.

Любая помощь приветствуется!

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
1 357
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку внутренний сервер разработки Gatsby (по умолчанию на порту 8000) обрабатывает прокси, в объекте ответа значение url всегда будет http://localhost:8000/... независимо от того, работает прокси или нет.

Вы можете получить больше информации, просматривая журнал с вашего локального сервера на порту 5000, посмотрите, действительно ли запрос от Гэтсби достигает этого конца; или выведите фактические данные, которые вы получаете из запроса.

Я не думал о том, чтобы проверить это таким образом. Все еще довольно новичок в этом деле. Спасибо! Оказывается, мне нужно было сделать res => res.json() и .then(res => console.info(res)), чтобы зарегистрировать фактическое тело. Поскольку я не видел свой жестко запрограммированный ответ в исходном журнале, я предположил, что что-то пошло не так, но я просто неправильно его регистрировал.

Reece M 08.04.2019 15:28

О, вот почему, рад, что вы разобрались!

Derek Nguyen 08.04.2019 21:32

Другие вопросы по теме