GatsbyJS / ReactJS неправильно проксирует запросы - PullRequest
Новая
       5

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

2 голосов
/ 08 апреля 2019

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

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

componentDidMount(){
    fetch('/myRepoAPI/hello')
    .then(res => console.log(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. Кажется, ничто не заставляет его работать так, как должно.

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

1 Ответ

1 голос
/ 08 апреля 2019

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

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

...