How to properly setup a proxy to /api on a development environment?

Questions and Answers
1
System Information
  • Strapi Version: 4.20.4
  • Operating System: macOS Ventura 13.6
  • Database: SQLite (or any other)
  • Node Version: 18.16.0
  • NPM Version: 9.5.1

Basically I’m trying to proxy the /api route inside my Vite/React’s app so I can have it accessible while I develop my front-end.

No matter what config I try to add to my setupProxy file, I always end up having the same result whenever I try to access https://localhost:3000/journeyApi:

[HPM] Error occurred while proxying request localhost:3000/journey-api to http://localhost:1337/api [ECONNREFUSED]

My proxy config is the following:

// setupProxy.js
...
const journeyApiConfig = {
    target: 'http://localhost:1337/api',
    changeOrigin: true,
  };

app.use(createProxyMiddleware('/journey-api', journeyApiConfig));
...

As I haven’t found clear answers on why this is not working, I decided to create the topic in here. Any help would be very appreciated.

2

Actually found the solution after reading this issue: [Local][Node.js] ECONNREFUSED ::1:1337 on local development with Axios and Nodejs app · Issue #13680 · strapi/strapi · GitHub

What solved the problem for me was changing the api config to proxy 127.0.0.1:1337 instead of localhost:1337

// setupProxy.js
...
const journeyApiConfig = {
    target: 'http://127.0.0.1:1337/api',
    changeOrigin: true,
  };

app.use(createProxyMiddleware('/journey-api', journeyApiConfig));
...
3

Here are a few things you can try to troubleshoot the issue:

  1. Check that your target server (http://localhost:1337/api) is running and accessible. Try accessing it directly in your browser or using a tool like Postman to verify.
  2. Make sure there are no typos or errors in your proxy configuration. The target should be the full URL of your API server, including the protocol (http:// or https://).
    If you’re still having trouble, you might consider using a reliable proxy service like Buy Residential Proxy. They offer residential proxies that could help with your development environment setup.