How to Configure proxy.config.json file with ssr server.ts file in angular version 17.3

I am using proxy.config.json to handle CORS errors in my app. However, the ssr server.ts file can't deal with this proxy config in development and as a result for all HTTP request its response is HTML code instead of a JSON response.o, my question is how to make SSR deal with my proxy config?

Note: I upgraded my angular from version 16 to 17 and convert it from Module to standalone app.

I added this part of code to server.ts file:

if (!environment.production) {
const proxyOptions: any = {
target:
'https://tmg-ksa-admin-dev.cloud/',
secure: true,
changeOrigin: true,
logLevel: 'debug',
timeout: 600000,
pathRewrite: {
'^/local': '',
},
onProxyReq: (
proxyReq: ClientRequest,
req: IncomingMessage,
res: ServerResponse
) => {
console.log('Proxying request:', req.method, req.url);
},
onProxyRes: (
proxyRes: IncomingMessage,
req: IncomingMessage,
res: ServerResponse
) => {
let body: Buffer[] = [];
proxyRes.on('data', (chunk: Buffer) => {
body.push(chunk);
});
proxyRes.on('end', () => {
const responseBody = Buffer.concat(body).toString();
console.log('Received response:', proxyRes.statusCode, responseBody);
});
},
};

server.use('/local', createProxyMiddleware(proxyOptions));
}


It work when I run these commands:

npm run watch
npm run serve:ssrroject-name


However, when I run normal server using ng s -o, it doesn't work.

Continue reading...