FabricJS loadSVGFromURL加载AWS S3 SVG遇CORS跨域问题求助

问题概述 #

将SVG文件存储在AWS S3存储桶中，通过FabricJS的loadSVGFromURL方法加载到画布时触发CORS跨域错误，该功能仅在Firefox中正常工作，Chrome和Edge无法运行。

原始代码 #

fabric.loadSVGFromURL(url,function(objects, options){

  var obj = fabric.util.groupSVGElements(objects, options);
  obj.scaleToHeight(canvas.height-120).set({ 
    left: (canvas.width / 2) - ((obj.width * obj.scaleX) / 2), 
    top: (canvas.height / 2) - ((obj.height * obj.scaleY) / 2),
    borderColor: '#eaeaea',
    cornerColor:'#eaeaea',
    cornerSize:10,
    cornerStyle:'circle',
    transparentCorners:false,
    lockUniScaling:true,
    fill:"#000000",
    id:"svg_0",
    url_svg: url
  }).setCoords();

  canvas.add(obj).renderAll();
});

原始AWS S3 CORS策略 #

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": [
        "Access-Control-Allow-Origin"
    ],
    "MaxAgeSeconds": 3000
},
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": []
}
]

修改后的代码（添加crossOrigin: 'Anonymous'） #

fabric.loadSVGFromURL(url,function(objects, options){

  var obj = fabric.util.groupSVGElements(objects, options);
  obj.scaleToHeight(canvas.height-120).set({ 
    left: (canvas.width / 2) - ((obj.width * obj.scaleX) / 2), 
    top: (canvas.height / 2) - ((obj.height * obj.scaleY) / 2),
    borderColor: '#eaeaea',
    cornerColor:'#eaeaea',
    cornerSize:10,
    cornerStyle:'circle',
    transparentCorners:false,
    lockUniScaling:true,
    fill:"#000000",
    id:"svg_0",
    url_svg: url
 }).setCoords();

canvas.add(obj).renderAll();

},null,{crossOrigin: 'Anonymous'});

修改后的AWS S3 CORS策略 #

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "*",
        "Anonymous"
    ],
    "ExposeHeaders": [
        "Access-Control-Allow-Origin"
    ],
    "MaxAgeSeconds": 3000
},
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET"
    ],
    "AllowedOrigins": [
        "*",
        "Anonymous"
    ],
    "ExposeHeaders": []
}
]

当前状态 #

修改后问题仍未解决，仅Firefox可正常运行，Chrome和Edge中仍出现CORS错误。

解决方案 #

1. 修正S3 CORS策略的错误配置 #

你在AllowedOrigins中添加"Anonymous"是错误的，AllowedOrigins仅接受域名或通配符*，Anonymous是请求的跨域标识，不属于源的范畴。同时，GET请求的规则需要确保返回Access-Control-Allow-Origin响应头，建议使用以下合并后的CORS策略：

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": ["Access-Control-Allow-Origin"],
    "MaxAgeSeconds": 3000
  }
]

该配置统一允许所有源的GET/POST/PUT/DELETE请求，并暴露必要的CORS头，避免拆分规则导致的头缺失问题。

2. 检查SVG文件的元数据 #

登录AWS S3控制台，找到对应的SVG文件，确认其Content-Type为image/svg+xml。若类型错误（比如默认的application/octet-stream），会导致浏览器无法正确识别资源，间接触发CORS相关异常。

3. 清除浏览器缓存 #

Chrome和Edge会缓存旧的CORS响应，即使你更新了S3的CORS策略，缓存的旧响应仍会导致错误。按Ctrl+Shift+R强制刷新页面，或直接清除浏览器缓存后重新测试。

4. 验证FabricJS版本兼容性 #

部分旧版本的FabricJS在处理crossOrigin参数时存在bug，建议升级到最新的稳定版本（如v5.x系列），确保参数能正确传递到资源请求中。

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