Angular中Froala编辑器插入Bearer令牌保护图片的问题

问题根源 #

Froala编辑器在图片上传完成后，会自动发起不带授权头的请求验证图片链接有效性，被权限保护的服务器拒绝，从而抛出Image cannot be loaded from the passed link错误。另外你当前image.uploaded事件中直接传入fetch返回的Response对象给editor.image.insert，这也是无效的——该方法需要的是图片URL或Blob对象。

具体解决方案 #

1. 禁用编辑器的图片自动验证

在Froala配置中添加imageManagerPreloader: false，阻止编辑器自动验证图片链接：

public froalaEditorOptions(token: string): object {
  const options: any = {
    key: environment.keys.froalaKey,
    imageUploadURL: 'http://localhost:5010/upload-image',
    imageUploadMethod: 'POST',
    imageMaxSize: 5 * 1024 * 1024,
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    requestHeaders: {
      Authorization: 'Bearer ' + token
    },
    // 禁用图片自动验证，避免无授权的验证请求
    imageManagerPreloader: false,
    events: {
      // 后续修改事件逻辑
    }
  };
  return options;
}

2. 修改image.uploaded事件逻辑，通过Blob插入图片

通过fetch请求获取图片Blob，创建本地Object URL后插入编辑器，绕开外部URL的授权限制：

events: {
  'image.uploaded': function(responseObj, editor) {
    const imageObject = JSON.parse(responseObj);
    const headers = new Headers();
    headers.set('Authorization', `Bearer ${token}`);

    fetch(imageObject.link, { headers })
      .then(res => {
        if (!res.ok) throw new Error('图片加载失败');
        return res.blob();
      })
      .then(blob => {
        const blobUrl = URL.createObjectURL(blob);
        // 将Blob URL插入编辑器
        editor.image.insert(blobUrl, null, null, null, responseObj);
      })
      .catch(err => console.error(err));
  }
}

3. 修正模板绑定（若存在问题）

确保模板中正确传入token到配置函数：

<div [froalaEditor]="froalaEditorOptions(userToken)" [(froalaModel)]="text"></div>

可选优化 #

如果需要在编辑器内容中保留原授权图片URL而非Blob URL，可以通过Angular HTTP拦截器拦截所有图片请求，自动添加Authorization头，但这种方式需要确保拦截器覆盖编辑器发起的所有图片请求（包括浏览器原生img标签的加载请求），实现相对复杂。

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