Reputation: 23
Hi everyone I'm trying to get fonts from AEM6.1 instance with an index.html created inside my local apache server out site the AEM instance, like this:
index.html
<link rel="stylesheet" type="text/css" href="http://localhost:4502/etc/designs/geometrixx/clientlibs/css/fonts.css" />
Inside 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;
}
This is the image of the browser response: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I tried with the absolute route for the fonts in the CSS file and the files are physically inside AEM, but I get the same response. Any ideas?
Thanks!
Upvotes: 2
Views: 2368
Reputation: 1008
The following SlingFilter should allow you to access those fonts from another domain
@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);
}
}
Source: https://gist.github.com/mickleroy/5ee8ed51ac245a8b59024a4ffec7cf7f
UPDATE
I highly recommend against doing this as it requires the AEM instance to be accessible via the public internet, which goes against the recommended AEM deployment architecture as it is not fronted by a web server with a dispatcher module. This work-around should ONLY be used for development. The recommended approach is to add the Access-Control
headers in your Apache configuration (according to my original answer):
<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>
Upvotes: 2
Reputation: 18563
Enabling cross-origin requests from all domains, as suggested by the other answer, is a bad idea. Putting that snippet in your AEM code could compromise your site's security.
Looking at the big picture, there are two ways you can avoid CORS problems:
Access-Control-*
headers. Just make sure to limit the values to trusted domains.Serve your resources from the same domain.
If you're using the dispatcher mod, you can have Apache cache pages, assets and client libraries returned by AEM and simply serve the font files from the cache. The browser would hit Apache anyway and it would be completely transparent to it whether the files come directly from Apache itself or if they're retrieved from AEM.
Alternatively, if you're looking for a quick, ad-hock solution to allow you to load the fonts on your local machine, you could use mod_proxy
on Apache to have it request the fonts from AEM and pass them on to the browser. Check out Apache: Using reverse proxy and run local website for an example of something similar.
Upvotes: 1