Angular如何为所有请求（含静态文件）设置自定义请求头？

首先明确你之前的误区：devServer.headers 是给开发服务器返回给浏览器的响应加头，不是给浏览器发往后端的请求加头，所以对静态资源请求无效；而 proxy.headers 仅对匹配 context 的代理请求生效，之前只配置了 /api，静态资源路径没包含在内，所以也不会带自定义头。

以下分场景给出可行方案：

一、开发环境（本地调试） #

1. 让静态资源请求走代理转发 #

修改 webpack 的代理配置，把静态资源的路径（比如你的 /res）加入 context，这样所有 /api 和 /res 开头的请求都会通过代理转发，代理会自动给这些请求加上配置的自定义头：

devServer: {
  proxy: [
    {
      context: ['/api', '/res'], // 包含API和静态资源的路径前缀
      target: 'https://localhost:3000',
      secure: false,
      headers: {
        'X-Custom-Foo': 'bar',
        'Authorization': 'Bearer ' // 注意补全实际的token内容
      },
    },
  ],
}

配置后，不管是 HttpClient 请求 /api 接口，还是 <img>/<video> 请求 /res 下的资源，都会经过代理转发，自动携带自定义头。

2. 本地托管的静态资源（如 assets 目录下的文件） #

如果静态资源是 Angular 项目本地的（比如 src/assets），不需要转发到后端，此时无法通过代理加头，需要用代码手动请求资源：

• 封装一个静态资源请求服务，利用 HttpClient 发起请求（会被你已有的拦截器自动加上自定义头），将返回的资源转为 Blob URL：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class StaticResourceService {
  constructor(private http: HttpClient) {}

  getResourceUrl(path: string) {
    return this.http.get(path, {
      headers: { 'X-Custom-Test': 'bar' }, // 或依赖拦截器自动加头
      responseType: 'blob'
    }).pipe(
      map(blob => URL.createObjectURL(blob))
    );
  }
}

• 在组件中使用该服务获取资源 URL，绑定到元素上：

import { Component, OnInit } from '@angular/core';
import { StaticResourceService } from './static-resource.service';

@Component({
  template: `<img [src]="imageUrl" alt="示例图片">`
})
export class ExampleComponent implements OnInit {
  imageUrl: string;

  constructor(private resourceService: StaticResourceService) {}

  ngOnInit() {
    this.resourceService.getResourceUrl('/assets/images/example.png').subscribe(url => {
      this.imageUrl = url;
    });
  }
}

二、生产环境 #

1. 静态资源托管在后端服务器 #

如果静态资源和 API 同域名部署，可直接复用开发环境的第二种方案（手动请求转 Blob URL），利用 HttpClient 的拦截器统一加头。

2. 后端服务器配置（若后端可控） #

如果静态资源由后端托管（如 Nginx、Node.js 服务），可以直接在后端配置：当收到静态资源请求时，自动验证或添加所需的自定义头，前端无需额外修改。

注意：如果静态资源跨域，自定义头会触发浏览器的 OPTIONS 预检请求，需要后端配置 CORS 允许这些自定义头（如 Access-Control-Allow-Headers: X-Custom-Foo, Authorization）。

内容的提问来源于stack exchange，提问作者Mu nt