Вот некоторый контекст. У меня есть сайт 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
. Кажется, ничто не заставляет его работать так, как должно.
Любая помощь приветствуется!
Поскольку внутренний сервер разработки Gatsby (по умолчанию на порту 8000) обрабатывает прокси, в объекте ответа значение url
всегда будет http://localhost:8000/...
независимо от того, работает прокси или нет.
Вы можете получить больше информации, просматривая журнал с вашего локального сервера на порту 5000, посмотрите, действительно ли запрос от Гэтсби достигает этого конца; или выведите фактические данные, которые вы получаете из запроса.
О, вот почему, рад, что вы разобрались!
Я не думал о том, чтобы проверить это таким образом. Все еще довольно новичок в этом деле. Спасибо! Оказывается, мне нужно было сделать
res => res.json()
и.then(res => console.info(res))
, чтобы зарегистрировать фактическое тело. Поскольку я не видел свой жестко запрограммированный ответ в исходном журнале, я предположил, что что-то пошло не так, но я просто неправильно его регистрировал.