I am trying so setup a npm-based HTML development environment using two servers. One hosts my HTML app of static files (standard way: http://localhost:8080
) while the other exposes an application api running locally(http://127.0.0.1:57146/api/someEntity
). The latter is beyond my control.
Calling the api URLs directly from my app brings up CORS issues. So i want to setup a proxy that redirects my calls from http://localhost:8080/apiBase/someEntity
to http://127.0.0.1:57146/api/someEntity
... hoping to avoid the CORS problems that way.
I am using lite-server, which builds on top of Browsersync.
Since my static app files do not need redirection, they should not be affected by the proxy.
To specify, which calls are redirected, i am trying to use the "pathFilter" field in the options. But i cannot get that functioning. Instead all calls are always proxied to http://127.0.0.1:57146
. "pathRewrite" does not seems to work, either. So it seems like i am missing something basic here. What am i doing wrong?
Here is my config file:
//bs-config.cjs
const { createProxyMiddleware } = require('http-proxy-middleware');
const apiProxy = createProxyMiddleware({
target: "http://127.0.0.1:57146/",
pathFilter:"apiBase/",
pathRewrite: {
"apiBase/": "api/"
},
logger: "console",
logLevel: "debug"
});
module.exports = {
port: 8080,
index: "parent.htm",
startPath: "parent.htm",
cors: true,
server: {
baseDir: "./dist",
index: "parent.htm",
cors: true,
middleware: [ apiProxy ]
}
};
With the help of a (very) patient backend guy, i finally found a solution. We could not get "pathRewrite" to work, but after getting the filter functioning (by changing some syntax), tweaking the paths ended up in a working setup.
//bs-config.cjs
const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy_filter = function (path, req) {
const regx = new RegExp("/apiBase");
return path.match(regx);
};
const proxy_options = {
target: "http://127.0.0.1:57146/api/",
changeOrigin: true,
logger: "console",
logLevel: "debug"
}
const apiProxy = createProxyMiddleware(proxy_filter, proxy_options);
module.exports = {
port: 8080,
index: "parent.htm",
startPath: "parent.htm",
server: {
baseDir: "./dist",
index: "parent.htm",
middleware: [
apiProxy
]
}
};