Angular 5 请求头未发送问题排查求助

Hey Marco Jr, let's figure out why your request headers aren't showing up in your Angular 5 app. I've run into this exact issue a few times, so here are the most likely causes and fixes to walk through:

1. You aren't properly creating and attaching HttpHeaders to your request #

Looking at your code snippet, you've imported HttpHeaders but I don't see where you're actually using it in the list() method. This is the most common culprit. Here's how to fix it:

list(): Observable<ResList> { 
  const url = this.gs.backendServer + this.gs.backend.endpoints.list;

  // Create your headers instance with the required keys/values
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    // Add any other headers you need, like auth tokens
    'Authorization': `Bearer ${this.gs.authToken}` 
  });

  // Pass the headers in the request options object
  return this.http.get<ResList>(url, { headers })
    .map(res => res)
    .do(res => console.log('Response received:', res));
}

Pro tip: Angular 5's HttpHeaders is immutable—so if you need to add headers dynamically, make sure to reassign the variable each time:

let headers = new HttpHeaders();
headers = headers.append('X-Custom-Header', 'value'); // Reassign to the updated instance

2. CORS Preflight (OPTIONS) Request Issues #

If your API is on a different domain, browsers send an OPTIONS preflight request first. If your backend doesn't explicitly allow the headers you're trying to send, the browser will drop them.

Check that your backend returns these headers in the OPTIONS response:

• Access-Control-Allow-Origin: Matches your Angular app's domain
• Access-Control-Allow-Headers: Includes all the custom headers you're sending (e.g., Content-Type, Authorization)

3. Global HttpInterceptor is overriding your headers #

If you've set up an HttpInterceptor in your app, double-check that it isn't modifying or removing your headers. For example, if the interceptor creates a new HttpHeaders instance without merging your existing ones, your custom headers will get lost.

Make sure the interceptor merges existing headers like this:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // Clone the request and merge existing headers with new ones
  const modifiedReq = req.clone({
    headers: req.headers.append('X-Interceptor-Header', 'value')
  });
  return next.handle(modifiedReq);
}

4. Request Method Limitations #

For GET requests, some servers or proxies might strip certain headers (though this is rare). If you're sending headers that are critical, test with a POST request to see if they show up—this can help narrow down if the issue is method-specific.

Start with the first point above, since that's the most straightforward fix. If you still have issues, share the full list() method and any interceptor code you have, and we can dig deeper!

内容的提问来源于stack exchange，提问作者Marco Jr