Проблема с AEM CORS со шрифтами во время запроса другим сервером

Question

Привет всем Я пытаюсь получить шрифты из экземпляра AEM6.1 с помощью index.html, созданного внутри моего локального сервера Apache, на экземпляр AEM, например:

index.html

<link rel="stylesheet" type="text/css" href="http://localhost:4502/etc/designs/geometrixx/clientlibs/css/fonts.css" /> 

Внутри font.css:

@font-face { 
    font-family: 'roboto'; 
    src: url('fonts/roboto_medium/Roboto-Medium-webfont.eot'); 
    src: url('fonts/roboto_medium/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/roboto_medium/Roboto-Medium-webfont.woff') format('woff'), 
     url('fonts/roboto_medium/Roboto-Medium-webfont.ttf') format('truetype'), 
     url('fonts/roboto_medium/Roboto-Medium-webfont.svg#robotomedium') format('svg'); 
    font-weight: 500; 
    font-style: normal; 
} 

Это изображение отклика браузера: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я пробовал с абсолютным маршрутом для шрифтов в файле CSS, и файлы физически находятся внутри AEM, но я получаю тот же ответ. Любые идеи?

Спасибо!

Answer 1

Следующая SlingFilter позволит вам получить доступ к этим шрифтов из другого домена

@SlingFilter(label = "Cross-Origin Request Filter", 
     metatype = true, 
     scope = SlingFilterScope.REQUEST, 
     order = -100) 
public class CORSFilter implements Filter { 

    @Override 
    public void doFilter(ServletRequest request, ServletResponse response, 
         FilterChain chain) throws IOException, ServletException { 

     if (response instanceof SlingHttpServletResponse) { 
      SlingHttpServletResponse slingResponse = (SlingHttpServletResponse) response; 
      slingResponse.setHeader("Access-Control-Allow-Origin", "*"); 
      slingResponse.setHeader("Access-Control-Allow-Credentials", "false"); 
     } 

     chain.doFilter(request, response); 
    } 
} 

Источник: https://gist.github.com/mickleroy/5ee8ed51ac245a8b59024a4ffec7cf7f

UPDATE

Я настоятельно рекомендую не делать этого, поскольку она требует экземпляр AEM чтобы быть доступным через общедоступный Интернет, что противоречит рекомендуемой архитектуре развертывания AEM, поскольку она не имеет доступа к веб-серверу с модулем диспетчера е. Эту работу нужно ТОЛЬКО использовать для разработки. Рекомендуемый подход заключается в добавлении Access-Control заголовки в конфигурации Apache (в зависимости от моего первоначального ответа):

<FilesMatch "\.(eot|ttf|otf|woff|woff2)$"> 
    <IfModule mod_headers.c> 
     Header set Access-Control-Allow-Origin "*" 
     Header set Access-Control-Allow-Methods "GET" 
     Header set Access-Control-Allow-Credentials "false" 
    </IfModule> 
</FilesMatch> 

Answer 2

Включение запросов кросс-происхождения из всех областей, как это было предложено другой ответ, это плохая идея. Помещение этого фрагмента в код AEM может поставить под угрозу безопасность вашего сайта.

Глядя на большой картине, есть два способа, вы можете избежать проблем CORS:

1. Разрешить запросы поперечного происхождения из определенных областей (но не какой-либо домен, это potentially dangerous Это может быть достигнуто путем установки. Access-Control-* заголовки. Просто убедитесь, чтобы ограничить значения доверенных доменов.

2. Подавать свои ресурсы из того же домена.

   Если вы используете the dispatcher mod, вы можете иметь страницы Apache кэша, активы и клиентские библиотеки ¨R вызывается AEM и просто служит для файлов шрифтов из кеша. Браузер в любом случае ударил бы Apache, и было бы совершенно прозрачно для него, будут ли файлы поступать непосредственно из Apache или если они получены из AEM.

   В качестве альтернативы, если вы ищете быстрое решение ad-hock, позволяющее загружать шрифты на вашем локальном компьютере, вы можете использовать mod_proxy на Apache, чтобы запросить шрифты от AEM и передать их на браузера. Посмотрите Apache: Using reverse proxy and run local website на пример чего-то подобного.