Fix Angular NG02802: Include Response Headers

Angular’s NG02802 error occurs when your app tries to read a response header that the server didn’t explicitly expose through CORS. This guide shows you how to fix it by configuring the server to include the headers your Angular code needs, and how to adjust your frontend code to handle the response safely.

What You’ll Need

• Access to the server that serves your API (to change CORS configuration)
• Basic familiarity with Angular’s HttpClient and interceptors
• Your browser’s developer tools (Network tab) to verify headers

Step-by-Step

1. Identify the missing header. Open your browser’s developer tools (F12), go to the Network tab, and reproduce the request that triggers NG02802. Click on the failing request, then look at the response headers. Note which header your Angular code tries to read but isn’t listed. Common examples: X-Total-Count, Authorization, Content-Disposition.
2. Locate the CORS configuration on your server. This depends on your backend stack:
   • Express (Node.js): Look for the cors middleware setup, usually in app.js or server.js.
   • Spring Boot (Java): Find the @CrossOrigin annotation on your controller or a global CORS config class.
   • ASP.NET Core: Check the ConfigureServices method in Startup.cs for AddCors.
   • Django (Python): Look for django-cors-headers settings in settings.py.
   • Nginx/Apache: Check the server or virtual host config for add_header or Header set directives.
3. Add the header to the exposed headers list. In your CORS configuration, you need to add the header name to the list of exposed headers. For example:
   • Express: app.use(cors({ exposedHeaders: ['X-Total-Count'] }))
   • Spring Boot: @CrossOrigin(exposedHeaders = "X-Total-Count")
   • ASP.NET Core: options.AddPolicy("MyPolicy", builder => builder.WithExposedHeaders("X-Total-Count"));
   • Django: CORS_EXPOSE_HEADERS = ['X-Total-Count']
   • Nginx: add_header Access-Control-Expose-Headers "X-Total-Count";
4. Restart your server. Most backend changes require a restart to take effect. Do that now.
5. Verify the header is now visible. Refresh your Angular app and trigger the request again. In the Network tab, check that the header now appears in the response headers. If it does, the error should be gone.
6. Update your Angular code (optional but recommended). Even with the server fixed, your Angular code should handle the case where a header might be missing. Instead of directly accessing response.headers.get('X-Total-Count'), check if it’s null first:

this.http.get<Item[]>('/api/items', { observe: 'response' })
  .subscribe(response => {
    const totalCount = response.headers.get('X-Total-Count');
    if (totalCount) {
      // Use the value
    }
  });

Common Mistakes

• Confusing “exposed” with “allowed” headers. Access-Control-Allow-Headers is for request headers, while Access-Control-Expose-Headers is for response headers. Make sure you’re adding to the right list.
• Forgetting to restart the server. CORS changes are often cached; a restart is usually required.
• Using the wrong header name. Header names are case-insensitive, but typos are common. Double-check the exact spelling.
• Not checking for null in Angular. Even after the fix, the header may be absent in some scenarios (e.g., a 204 No Content response). Always check for null.

Tips

• Use an interceptor for consistent header handling. Create an Angular HTTP interceptor that reads the headers you need and stores them in a service, so you don’t repeat the logic in every component.
• For development, use a proxy. If you’re using Angular CLI, you can set up a proxy to your backend to avoid CORS entirely during development. This is a good temporary workaround while you fix the server.
• Keep a list of all headers your app needs. Document them so future developers know what to expose.
• Test with curl. Use curl -I https://your-api.com/endpoint to see the response headers without a browser. This helps confirm the server is sending the right headers.

Troubleshooting

• Header still not showing after the fix. Check if your server has multiple CORS configurations (e.g., one for development, one for production). You might have edited the wrong one. Also, check if a proxy or CDN is stripping the header.
• Error persists even though the header is visible in the Network tab. This can happen if you’re using Angular’s HttpClient with a custom backend that doesn’t send the header on all responses (e.g., only on POST, not on GET). Make sure the header is sent on the specific request that fails.
• Getting a different CORS error. If you see a message like “Request header field X is not allowed by Access-Control-Allow-Headers”, that’s a different issue. You need to add the request header to Access-Control-Allow-Headers on the server.
• If you don’t have access to the server. You cannot fix this client-side. You’ll need to ask the API provider to expose the header, or use a proxy server that adds the header for you.

Frequently Asked Questions

What exactly is NG02802?

NG02802 is an Angular error that occurs when you try to read a response header via HttpResponse.headers.get() and the header is not present in the response. This is usually because the server didn’t include it in Access-Control-Expose-Headers.

Is this a frontend or backend issue?

It’s a backend/CORS configuration issue. The server must explicitly tell the browser which headers it’s allowed to read. The frontend cannot force the browser to expose a header that the server hasn’t allowed.

Can I bypass CORS in Angular?

No, you cannot bypass CORS in the browser. You can use a proxy during development, but in production the server must be configured correctly.

Why does response.headers.get() return null?

It returns null when the header is not in the response. This could be because the server didn’t send it, or because the browser blocked it due to CORS policy.

What if I need to read a custom header like X-Total-Count?

You need to add that header to the Access-Control-Expose-Headers list on the server. The steps above show how.

Does this error occur in Angular Universal (server-side rendering)?

Yes, it can occur in SSR as well, but the cause is the same. The server-side request may not have the same CORS restrictions, but if the header is genuinely missing, you’ll still get a null value.

Related

• Coding Agent Permissions: What to Allow & When
• How to Enable 4K HDR and 120Hz Over HDMI
• Failed Google Products: A Complete List