FilePond无法从服务器加载初始图片——跨域（CORS）问题

嘿，我看你遇到了个头疼的问题：用FilePond加载自己服务器的图片当预览图时老是失败，但换成picsum的地址就完全正常。这大概率是几个常见坑导致的，我给你梳理下对应的解决思路：

1. 先排查跨域（CORS）问题 #

这是最常见的原因！如果你的前端页面和图片服务器不在同一个域名下，服务器没配置CORS响应头的话，浏览器会直接阻止fetch请求拿图片。

怎么解决？ #

• 先打开浏览器开发者工具的Network面板，加载图片时看请求的响应头里有没有Access-Control-Allow-Origin，值得包含你的前端域名（测试阶段可以临时设为*，但生产环境别这么干）。
• 如果是Node.js/Express服务器，直接用cors中间件就能快速配置；要是Nginx的话，在配置文件里加这几行：

  add_header Access-Control-Allow-Origin "你的前端域名";
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  

2. 检查图片地址和权限 #

• 先确认你的source地址是不是对的：有没有漏写域名？路径是不是打错了？直接在浏览器地址栏输入这个地址，看看能不能正常显示图片。
• 如果图片需要登录才能访问（比如依赖Cookie或Token），fetch默认不会带这些认证信息，得改下fetch的配置：

  fetch(source, {
    credentials: 'include' // 要是同域名的话用'same-origin'更安全
  })
  .then(res => res.blob())
  .then(load)
  .catch(err => error('加载失败'));
  

3. 给load回调加上错误处理 #

你现在的代码里没处理fetch失败的情况，就算请求出错了也看不到具体原因，建议加上错误捕获，方便调试：

server={
  load: (source, load, error, progress, abort, headers) => {
    fetch(source)
      .then(res => {
        // 先检查响应状态码，4xx/5xx都算失败
        if (!res.ok) {
          throw new Error(`请求失败：${res.status}`);
        }
        return res.blob();
      })
      .then(load)
      .catch(err => {
        error(err.message); // 让FilePond显示错误提示
        console.error('加载图片出错啦：', err); // 控制台看详细错误信息
      });
  },
  process: (fieldName, file, metadata, load) => {
    load(Date.now())
  }
}

4. 确认服务器的响应格式 #

检查服务器返回图片时的Content-Type响应头是不是正确的（比如image/jpeg、image/png），要是类型不对，res.blob()可能没法正确解析图片。

最后给你个小技巧：直接在浏览器里访问你的图片地址，同时看Network面板的请求详情，状态码、响应头、响应内容这些信息能帮你快速定位问题！

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