Как встроить SVG в тег html <object> из URL-адреса Cross Origin, скажем (s3_url / image.svg)
Я просмотрел все возможные ресурсы, которые мог найти в Интернете, MDN, W3C и т. д., Но нигде не нашел документации по cors.
Я пытаюсь встроить SVG в HTML. Он отлично работает с тем же URL-адресом источника
<object id = "obj1" data = "same_origin_url/image.svg"></object>
При использовании cross_origin_url невозможно встроить SVG.
<object id = "obj2" data = "cross_origin_url/image.svg"></object>
в первом случае я могу получить доступ к SVG, используя следующий код, и выполнить необходимые манипуляции (например, изменение цвета) с SVG.
document.getElementById('obj1').contentDocument.getElementByTagName('svg')
а во втором случае он возвращает ошибку, поскольку contentDocument объекта obj2 возвращает значение null.
document.getElementById('obj2').contentDocument.getElementByTagName('svg')
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
На веб-сервере, на котором размещен ваш файл svg, необходимо установить заголовок ответа Access-Control-Allow-Origin. Например, для веб-сервера Apache вы должны включить mod_headers и настроить его в своей конфигурации для вашего сервера в файлах конфигурации или .htaccess.
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>