GatsbyJS/ReactJS not proxying requests correctly

Question

Here's some context. I have a ReactJS site, built with Gatsby. This site is entirely static and has no backend. I've recently been working on a backend integration, as I wanted to do some datavis stuff with the GitHub API. Anyway, I was working on building my own backend API with NodeJS, and then proxying the frontend requests (using the fetch API).

The frontend, during development, is at localhost:8000, and the backend at localhost:5000. This is my gatsby-config.js file. It has some other bits unrelated to this question, but the proxy bit is just at the bottom:

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",
  },
}

Essentially, any requests made from the frontend that are to /myRepoAPI/anything should be proxied away from the frontend, to the backend. I've used Postman to validate the backend, and this endpoint functions as it should.

Here is the fetch call I used in a frontend React component:

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

Now analysing that console log:

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

The url value is at localhost: 8000 , not 5000 . The proxy hasn't worked. I have tried different combinations of routes, trailing / 's, and even trying the advanced proxy method of developMiddleware . Nothing seems to get it working as it should.

Any help would be much appreciated!

Answer 1

Since Gatsby's internal development server (default at port 8000) handles the proxy, in the response object the url value will always be http://localhost:8000/... regardless whether the proxy's working or not.

You may have more clue when looking at the log from your local server at port 5000, see if the request from Gatsby is actually hitting that end; or log out the actual data you get from the request.