how to setup proxy table in create-react-app

Question

I have an API backend server, the frontend is being served by a different server created by create-react-app and I need to proxy a specific set of requests from CRA server to the API server.

I am trying to make use of http-proxy-middleware. For a simple use case when there is only one rule, it works just fine. But I have no luck with using multiple rules at once.

I have been following the documentation and came up with something like this (content of setupProxy.js).

const proxy = require('http-proxy-middleware');

const proxyTable = {
    '/auth/google': 'http://localhost:5000/',
    '/api/*': 'http://localhost:5000'
};

const options = {
    target: 'http://localhost:3000',
    router: proxyTable
};

module.exports = function(app) {
    app.use(proxy(options));
};

First of all, I don't know about the target property in options but according to documentation, it sets the target url for every request that is not specified in the proxyTable. Well, I just want to leave all my other requests untouched so I have set the value to be the same as the address on which the CRA is running (not sure if this is the correct approach, documentation is not clear about that).

The issue that I am running into is that if I try to route the request back then there is this error.

Error occurred while trying to proxy request / from localhost:3000 to http://localhost:3000 (EADDRNOTAVAIL)

I am not sure that I understand this error. If I change the value of target there are some other error messages similar to this one showing up and noting seems to work.

Any help would be appreciated.

score 0 · Answer 1 · answered Oct 08 '18 at 22:43

Ok, I have found a fix by using proxy middleware multiple times -- one for each rule.

For anyone interested,

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy('/api/*', { target: 'http://localhost:5000' }));
    app.use(proxy('/auth/google', { target: 'http://localhost:5000' }));
};

But the proxy table is still not working so anyone that knows how to make it work, please share.

how to setup proxy table in create-react-app

1 Answers1