Question

在我的Django项目中，我有一个JS库，该库也将SVG用于图标。这些文件位于S3存储桶中-意味着不在我自己的域中。启动JS时，它将尝试加载SVG图标，并在Chrome中引发浏览器错误：

Unsafe attempt to load URL https://s3.amazonaws.com/<mydomain.com>/static/pixie/assets/icons/merged.svg
from frame with URL 
<mydomain.com>/images/pixie/dcfcf90e-d4fa-4bde-bb6b-6cebe00e6d7a/. 
Domains, protocols and ports must match.

有没有一种方法可以直接从我的项目中提供这些SVG？

如果SVG是从我自己的域提供的，例如<mydomain.com>/svgs/merged.svg，然后我认为“不安全的加载尝试”错误将得到解决。

尤其是在.js文件中

return t.prototype.ngOnInit = function() {
                        this.path = this.settings.getAssetUrl("icons/merged.svg") + "#" + this.name, this.renderer.addClass(this.el.nativeElement, ("icon-" + this.name).replace(/ /g, "-"))
                    }, t

Answer 1

当前，在框架/ CORS级别上似乎没有解决此问题的方法。从CDN加载外部SVG的唯一方法是通过不太友好的Ajax调用。

您做错了什么-根本是一个问题：<use>标签的xlink:href将从不从远程服务器加载内容，即使启用了跨域资源共享。

要通过XMLHttpRequest加载SVG，您需要执行以下操作：

var ajax = new XMLHttpRequest();
ajax.open("GET", "https://s3.amazonaws.com/<mydomain.com>/static/pixie/assets/icons/merged.svg", true);
ajax.send();
ajax.onload = function(e) {
  var div = document.createElement("div");
  div.innerHTML = ajax.responseText;
  document.body.insertBefore(div, document.body.childNodes[0]);
}

但是，这一切值得吗？考虑到您认为SVG必须相当轻巧？

Answer 2

我知道了。将URL指向视图：

def svgview(request):
    file = open('/app/<app_name>/static/pixie/assets/icons/merged.svg', 'rb')
    response = HttpResponse(content=file)
    response['Content-Type'] = 'image/svg+xml'
    return response

Django：服务SVG

2 个答案: