Trying to get basic proxy working...

[rp0m]

Hi all,

I'm trying to get a proxy working and am not having much luck. I'm not sure if this is a bug, since according to the official doco, it should be pretty simple to set up (https://www.npmjs.com/package/http-proxy-middleware).

What I'm trying to do: proxy all /api/ requests to localhost:5000/api/, so GET localhost:8000/api/entities should go to GET localhost:5000/api/entities. My UI is on port 8000 and my API is on port 5000, so to avoid CORS issues, I need to set up a proxy.

My proxy code:

developMiddleware: app => {
    // localhost:8000/api/foo/bar -> localhost:5000/api/foo/bar
    app.use('/api', createProxyMiddleware({ target: 'localhost:5000/api', changeOrigin: true }));
}

The error that I get when attempting to fetch data from http://localhost:8000/api/entities:

error [HPM] Error occurred while proxying request localhost:8000/api/entities to localhost:5000/api [ENOTFOUND]
(https://nodejs.org/api/errors.html#errors_common_system_errors)

It looks like the proxy is cutting off the path after the /api, which is not ideal. I've tried a few different things with rewritePath and wildcards like * and ^, however I'm not having much luck...

For reference, this within a React, Gatsby app, which I am not familiar with (being an Angular dev). The following Gatsby configuration seem to work fine, but I would rather use http-proxy-middleware as it gives me additional logging and options.

// Works fine..
proxy: {
    prefix: '/api',
    url: 'http://localhost:5000'
},

[chimurai]

Your target is missing the protocol http: or https:

And depending on the http-proxy-middleware version it should be like:

// v2
app.use('/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true }));

// v3
app.use('/api', createProxyMiddleware({ target: 'http://localhost:5000/api', changeOrigin: true }));