另一台服务器请求 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

更新

我强烈建议不要这样做，因为它要求 AEM 实例可以通过 public 互联网访问，这违反了推荐的 AEM 部署架构，因为它的前端没有带有调度程序模块的 Web 服务器.这个 work-around 应该只用于开发。推荐的方法是在您的 Apache 配置中添加 Access-Control headers（根据我的原始答案）：

<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

按照其他答案的建议，启用来自所有域的 cross-origin 请求是个坏主意。将该代码段放入您的 AEM 代码中可能会危及您网站的安全性。

纵观全局，有两种方法可以避免 CORS 问题：

允许来自特定域的cross-origin请求（但不是任何域，即potentially dangerous。这可以通过设置Access-Control-* headers来实现。只要确保将值限制为受信任的域。
从同一域提供您的资源。

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

或者，如果您正在寻找一种快速的 ad-hock 解决方案以允许您在本地计算机上加载字体，您可以使用 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 作为类似示例。

另一台服务器请求 AEM CORS 字体问题

AEM CORS issue with Fonts while is being request by another server

fonts

cross-domain

aem