ReactJS报Not allowed to load local resource 头像上传异常

• file://路径加载报错：现代浏览器基于安全沙箱策略，绝对禁止Web页面直接加载本地磁盘file协议的资源。<input type="file">返回的C:/fakepath/xxx是浏览器生成的安全占位虚拟路径，不是文件实际上传后的可访问地址，直接存储、返回这个路径完全无效。
• 公网谷歌图片加载消失：要么是谷歌图片配置了防盗链，拦截第三方站点的跨域引用请求；要么是Stream Chat默认的内容安全策略（CSP）、资源域名白名单没有放行对应域名，资源被浏览器拦截后不会渲染。

1. 修正头像上传全流程，弃用fakepath逻辑 #

不要读取file input的value值作为头像地址，按正确上传流程走：

• 前端监听file input的change事件，拿到选中的原生File对象，不要取路径字符串。
• 存储方案二选一：
  • 省事方案：直接调用Stream Chat JS SDK自带的头像上传方法，SDK会自动完成文件转存、返回官方CDN的HTTPS地址，不需要自己搭存储：

    // fileObject是input选中的原生文件对象
    const uploadRes = await client.uploadUserAvatar(fileObject, currentUserId);
    // 上传完成后直接更新用户信息
    await client.updateUser({
      id: currentUserId,
      avatar: uploadRes.file
    });
    

  • 自定义存储方案：把File对象包装成FormData，请求你部署在Heroku上的Node.js上传接口。注意Heroku本地文件系统是临时存储，服务重启、重新部署后文件会全部丢失，必须把图片存在S3兼容的对象存储服务中，上传完成后返回HTTPS协议开头的公网可访问URL，再调用上面的updateUser方法把地址写入用户avatar字段。
    注意：所有头像地址必须是HTTPS协议，HTTP地址会被HTTPS站点判定为混合内容，直接拦截无法加载

2. 配置Stream Chat资源白名单 #

如果用自定义存储服务，需要把存储服务的访问域名加到Stream Chat的白名单里，否则会被CSP规则拦截：

• 登录Stream Chat控制台，进入目标应用
• 找到「App Configuration」-「Security & Privacy」配置页
• 在「Allowed URL Domains」列表中，添加头像资源所在的根域名（比如你的Heroku应用域名、对象存储的访问域名），保存后等待2-3分钟配置生效即可。
• 测试阶段不要用谷歌图片的地址，谷歌全站配置了防盗链，会拦截所有第三方站点的引用请求，换无防盗链的测试资源即可。

3. 常见坑排查 #

• 如果公网URL粘贴后图片仍然消失，打开浏览器控制台Network面板：状态码403是源站防盗链拦截，状态码显示blocked:csp是白名单配置未生效/域名填错。
• 不要尝试把用户上传的头像存在Heroku服务本地目录，dyno重启后文件会永久丢失。
• 不要把本地开发时的localhost、127.0.0.1地址存为头像地址，其他用户访问时会请求自己的本地资源，必然加载失败。

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