Джанго: обслуживание SVG - PullRequest
Новая
       18

Джанго: обслуживание SVG

0 голосов
/ 26 августа 2018

В моем проекте 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

Ответы [ 2 ]

0 голосов
/ 26 августа 2018

Я понял это.Укажите 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
0 голосов
/ 26 августа 2018

В настоящее время не существует способа обойти эту проблему на уровне framework / CORS.Единственный способ загрузить внешний SVG из CDN - это довольно неприличный Ajax-вызов.

Ничего плохого вы не сделали - более фундаментальная проблема: тег <use> xlink:href будет НИКОГДА загрузка содержимого с удаленного сервера, даже с включенным перекрестным общим доступом к ресурсам.

Чтобы загрузить SVG через XMLHttpRequest, вам нужно выполнить что-то вроде следующего: 

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 должен быть довольно легким?

...