当另一台服务器请求时，字体出现AEM CORS问题

Question

大家好，我正试图从AEM6.1实例中获取字体，并在我的本地apache服务器外部站点AEM实例中创建一个index.html，如下所示：

index.html

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

内部字体.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;
}

这是浏览器响应的图像：请求的资源上不存在"Access Control Allow Origin"标头。

我尝试在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

更新

我强烈建议不要这样做，因为它要求AEM实例可以通过公共互联网访问，这违背了建议的AEM部署架构，因为它不是由具有调度器模块的web服务器引导的。这种变通办法只能用于开发。推荐的方法是在Apache配置中添加Access-Control头(根据我最初的回答)：

<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. 允许来自某些域(但不是任何域，这可能很危险。这可以通过设置Access-Control-*标头来实现。只需确保将值限制在受信任的域即可

2. 从同一域提供资源。

   如果你使用的是dispatcher mod，你可以让Apache缓存页面、资产和客户端库由AEM返回，只需提供缓存中的字体文件。浏览器无论如何都会访问Apache，无论文件是直接来自Apache本身还是从AEM检索到，它都是完全透明的。

   或者，如果你正在寻找一个快速、即时的解决方案，允许你在本地机器上加载字体，你可以在Apache上使用mod_proxy，让它从AEM请求字体，并将其传递到浏览器。查看Apache：使用反向代理并运行本地网站以获得类似的示例。