Angular HTTP代理调用受保护后端：Froala附件GET请求鉴权问题

我之前在项目里也碰到过一模一样的问题——Froala上传附件时能通过requestHeaders带鉴权头，但上传完生成的img/src或link/href触发的GET请求没法带授权信息，直接被后端拦了。给你几个实际用过的可行方案：

方案1：后端生成带签名的临时访问URL #

这是我最推荐的方案，从根源上解决问题。

原理是：当附件上传成功后，后端不要直接返回原始的受保护URL，而是生成一个带签名、有有效期的临时URL。这个临时URL不需要额外鉴权，后端只需要验证URL里的签名是否合法、是否在有效期内，就允许访问附件。

比如后端可以把access_token（或者自定义的签名参数）和过期时间编码进URL里，前端拿到这个临时URL直接用就行。等临时URL过期了，用户如果还需要访问，再重新生成新的临时链接。这种方式既保证了安全，又不用前端做复杂的处理。

方案2：自定义附件加载逻辑，用Blob URL预览 #

如果后端没法改，那可以在前端拦截Froala的上传完成回调，自己通过带鉴权头的请求获取附件内容，生成本地Blob URL来预览。

具体代码示例：

new FroalaEditor('#editor', {
  // 上传接口地址
  imageUploadURL: '/api/upload/attachment',
  // 上传时带鉴权头
  requestHeaders: {
    'Authorization': `Bearer ${localStorage.getItem('access_token')}`
  },
  // 图片上传完成后的回调
  imageUploaded: function(response, editor, imgElement) {
    // 假设后端返回的真实受保护地址是 response.data.url
    const protectedUrl = response.data.url;
    
    // 用fetch带鉴权头获取附件Blob
    fetch(protectedUrl, {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('access_token')}`
      }
    })
    .then(res => res.blob())
    .then(blob => {
      // 生成本地Blob URL
      const blobUrl = URL.createObjectURL(blob);
      // 替换图片的src为Blob URL
      imgElement.src = blobUrl;
      // 把真实地址存在data属性里，后续保存内容时用这个真实地址
      imgElement.dataset.realUrl = protectedUrl;
    })
    .catch(err => {
      console.error('加载附件失败:', err);
      editor.popups.show('alert', '附件加载失败，请重试');
    });
  },
  // 文件（非图片）上传完成的回调类似
  fileUploaded: function(response, editor, linkElement) {
    const protectedUrl = response.data.url;
    linkElement.dataset.realUrl = protectedUrl;
    // 给链接加点击事件，点击时用带鉴权的请求下载
    linkElement.addEventListener('click', function(e) {
      e.preventDefault();
      fetch(protectedUrl, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('access_token')}`
        }
      })
      .then(res => res.blob())
      .then(blob => {
        // 创建下载链接
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = linkElement.textContent;
        a.click();
      });
    });
  }
});

注意：后续保存编辑器内容时，要把所有data-real-url里的真实地址提取出来，替换掉Blob URL再存到数据库——因为Blob URL是本地临时的，刷新页面就失效了。

方案3：全局拦截请求，自动添加鉴权头 #

如果你的项目是单页应用，也可以全局拦截所有到附件服务器的GET请求，自动给它们加上鉴权头。

比如封装fetch：

// 封装带鉴权的fetch
const authFetch = (url, options = {}) => {
  // 判断请求地址是否是附件服务器的
  if (url.includes('your-attachment-server-domain.com')) {
    options.headers = {
      ...options.headers,
      'Authorization': `Bearer ${localStorage.getItem('access_token')}`
    };
  }
  return fetch(url, options);
};

// 替换全局的fetch
window.fetch = authFetch;

或者用Froala的image.beforeLoad事件拦截图片加载：

new FroalaEditor('#editor', {
  imageBeforeLoad: function(img) {
    const originalSrc = img.src;
    // 用带鉴权的fetch获取Blob并替换src
    authFetch(originalSrc)
    .then(res => res.blob())
    .then(blob => {
      img.src = URL.createObjectURL(blob);
    });
    // 返回false阻止默认的图片加载行为
    return false;
  }
});

这个方案的好处是不用改上传逻辑，但要注意全局拦截可能影响其他请求，需要精准判断请求地址。

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