Angular中TinyMCE v6获取图片时如何添加Token及安全请求头？

针对你遇到的TinyMCE加载带鉴权的图片时返回401的问题，有两种可行的解决方式：

方法一：使用TinyMCE内置的images_load_handler配置 #

这个配置可以完全接管编辑器的图片加载逻辑，让你自定义请求并携带鉴权头：

在Angular组件的TinyMCE初始化代码中添加以下配置：

tinymce.init({
  // 其他已有配置（如plugins、toolbar等）
  images_load_handler: function (blobInfo, success, failure) {
    const imageUrl = blobInfo.blob().src;
    // 利用Angular的HttpClient发起带鉴权头的请求
    this.http.get(imageUrl, {
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('authToken'), // 替换为你的Token获取逻辑
        'X-Custom-Security-Header': 'your-custom-value' // 替换为自定义安全头
      },
      responseType: 'blob'
    }).subscribe({
      next: (blob) => {
        const reader = new FileReader();
        reader.onload = () => {
          success(reader.result as string); // 将Blob转为DataURL供编辑器展示
        };
        reader.readAsDataURL(blob);
      },
      error: (err) => {
        failure(`图片加载失败: ${err.message}`);
      }
    });
  }.bind(this) // 绑定组件上下文，确保能访问HttpClient
});

这个方式的好处是仅针对TinyMCE的图片加载请求生效，不会干扰项目中其他请求。

方法二：通过Angular HttpInterceptor全局拦截图片请求 #

如果希望所有符合规则的图片请求自动携带鉴权头，可以创建一个拦截器：

1. 创建拦截器文件tiny-mce-image.interceptor.ts：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TinyMceImageInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 匹配你的图片API域名/路径，避免误拦截其他请求
    if (request.url.startsWith('https://mydomain/downloadimage')) {
      const authToken = localStorage.getItem('authToken'); // 替换为你的Token获取逻辑
      const modifiedRequest = request.clone({
        headers: request.headers
          .set('Authorization', `Bearer ${authToken}`)
          .set('X-Custom-Security-Header', 'your-custom-value')
      });
      return next.handle(modifiedRequest);
    }
    return next.handle(request);
  }
}

2. 在AppModule中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TinyMceImageInterceptor } from './tiny-mce-image.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TinyMceImageInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

这种方式无需修改TinyMCE的配置，全局自动处理符合URL规则的请求。

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