Proxy uri not found after creating new proxy in api-config?

I am trying to setup a proxy, following the documentation here: https://backstage.io/docs/plugins/proxying

Here is my app-config.yaml, I would like to create a proxy which points to another locally running app on port 8083.

proxy:
   endpoints:
    /graphql:
       target: 'http://localhost:8083/graphql'
       method: ['GET', 'POST']
       port: 3000

Here are the backstage logs:

[1] 2025-03-31T10:02:14.960Z proxy info [HPM] Proxy created: /graphql  -> http://localhost:8083/graphql type=plugin
[1] 2025-03-31T10:02:14.961Z proxy info [HPM] Proxy rewrite rule created: "^/api/proxy/graphql/?" ~> "/" type=plugin
[1] 2025-03-31T10:02:14.962Z search info Added DefaultCatalogCollatorFactory collator factory for type software-catalog type=plugin
[1] 2025-03-31T10:02:14.962Z search info Added DefaultTechDocsCollatorFactory collator factory for type techdocs type=plugin
[1] 2025-03-31T10:02:14.962Z search info Starting all scheduled search tasks. type=plugin

But when I try to use the proxy endpoint in backstage I can see the following error in the console:

POST http://localhost:3000/api/proxy/graphql 404 (Not Found)

I also try to manually access this endpoint via the browser and also get a 404 error. Is there something I am missing in the config? Does the proxy uri run on another port?

Solution

If you kept the basic port of Backstage for local development (3000 for Frontend and 7007 for Backend) you are exposing the endpoint on the Frontend instead of the Backend of Backstage, which doesn't work I think.

So maybe try to remove the "port: 3000" line in your app-config.yaml for the configuration of the proxy.

Could you try a configuration like this :

proxy:
 endpoints:
   /graphql:
     target: 'http://localhost:8083/graphql'
     allowedMethods: ['GET', 'POST']

You can try to make a test with this then :

POST http://localhost:7007/api/proxy/graphql

Here is an example on how to call the proxy endpoint within Backstage:

// Inside your component
const backendUrl = config.getString('backend.baseUrl'); // e.g. http://localhost:7007
fetch(`${backendUrl}/frobs-aggregator/summary`)
  .then(response => response.json())
  .then(payload => setSummary(payload as FrobSummary));

Source

If you could provide more information on your configuration it could help pin down the problem 🙂 (like the full app-config.yaml, the code where the proxy endpoint is actually used in backstage, maybe in a plugin or a React component)

Regards,