How to configure Angular proxy for API
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Proxy configuration in Angular development server forwards API requests to backend servers, bypassing CORS restrictions during local development. As the creator of CoreUI, a widely used open-source UI library, I’ve configured API proxies in Angular projects throughout my 11 years of Angular development. The most reliable approach is creating a proxy.conf.json file that maps request paths to target backend URLs. This method eliminates CORS errors in development while keeping production code unchanged.
Create proxy.conf.json file and configure ng serve to use it for API forwarding.
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
Update angular.json to use the proxy:
{
"projects": {
"your-app-name": {
"architect": {
"serve": {
"options": {
"proxyConfig": "proxy.conf.json"
}
}
}
}
}
}
Or run directly:
ng serve --proxy-config proxy.conf.json
Here the proxy.conf.json maps requests starting with /api to the backend server at localhost:3000. When your Angular app calls fetch(’/api/users’), the dev server forwards it to http://localhost:3000/api/users. The changeOrigin option modifies the origin header to match the target, preventing backend CORS issues. The logLevel: “debug” option logs proxy activity to the console for troubleshooting.
Best Practice Note:
This is the proxy configuration we use in CoreUI Angular templates for seamless backend integration during development. Use pathRewrite to strip /api prefix if your backend doesn’t expect it, configure multiple proxy entries for different services, and remember proxy only works in development—production requires proper CORS configuration on the backend server.
