如何在 CRXDE 中启用 CORS Lite/AEM
How to Enable CORS in CRXDE Lite/AEM
我们使用 CRX DE lite/Adobe EM 作为 Angularjs SPA UI/frontend 的后端。我们如何为这种后端技术设置 CORS?我们可以使用工具 http://localhost:4502/crx/de/index.jsp 来更改设置。但是我们不确定如何设置 CORS 启用。
请指教
我不知道在 AEM 中的何处启用 CORS(或者如果可能的话,我会查看 OSGi 控制台 http://localhost:4502/system/console/configMgr
如果有的话)但是解决 CORS 问题的一种方法是在同一域中公开 AEM 和前端,通过在 Apache 上设置代理应该相当容易。
在 AEM 发布实例前面的 Apache 服务器上,在 httpd.conf
中,您可以执行如下操作:
ProxyPass /your-frontend http://whatever.it.runs.on/actual-path-to-the-frontend/
ProxyPassReverse /your-frontend http://whatever.it.runs.on/actual-path-to-the-frontend/
从 AEM 6.3 开始
有一个名为 Adobe Granite Cross-Origin Resource Sharing Policy 的 OOTB 服务。这就像使用 alloworigin=[http://localhost:8000]
属性 创建 OSGi 配置一样简单。在我的例子中,我的 Angular 应用程序在端口 8000 上 运行 试图访问 4503 上的发布者。
之前的 AEM 6.3
我最终所做的(起初)是创建一个实现 AuthenticationInfoPostProcessor
的服务。在那里,我设置了以下 headers:
- Access-Control-Allow-Credentials
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
GET 请求一切正常。但是当我们尝试 POST 时,我们 运行 发现浏览器正在发送 pre-flight OPTIONS 请求失败,因为浏览器没有使用 login-token
cookie。
然后我们尝试了 @SlingFiter
,但是它属于正常的 sling 管道,因此它是在检查身份验证之后,所以没有身份验证 cookie,pre-flight 总是会失败。
最后,我们实现了一个带有以下注解的过滤器:
@Component(immediate = true)
@Service(value = Filter.class)
@Properties({ @Property(name = "pattern",
value = "/.*"),
@Property(name = Constants.SERVICE_RANKING,
intValue = 1000) })
这里的关键是 pattern
属性,它将过滤器注册为 Apache Felix Whiteboard 过滤器,而不是 Sling。 See here。因此过滤器将为 OPTIONS 和 return 设置 CORS headers,并为其他所有内容设置 CORS headers,并将请求传递给链中的下一个过滤器。
我们使用 CRX DE lite/Adobe EM 作为 Angularjs SPA UI/frontend 的后端。我们如何为这种后端技术设置 CORS?我们可以使用工具 http://localhost:4502/crx/de/index.jsp 来更改设置。但是我们不确定如何设置 CORS 启用。
请指教
我不知道在 AEM 中的何处启用 CORS(或者如果可能的话,我会查看 OSGi 控制台 http://localhost:4502/system/console/configMgr
如果有的话)但是解决 CORS 问题的一种方法是在同一域中公开 AEM 和前端,通过在 Apache 上设置代理应该相当容易。
在 AEM 发布实例前面的 Apache 服务器上,在 httpd.conf
中,您可以执行如下操作:
ProxyPass /your-frontend http://whatever.it.runs.on/actual-path-to-the-frontend/
ProxyPassReverse /your-frontend http://whatever.it.runs.on/actual-path-to-the-frontend/
从 AEM 6.3 开始
有一个名为 Adobe Granite Cross-Origin Resource Sharing Policy 的 OOTB 服务。这就像使用 alloworigin=[http://localhost:8000]
属性 创建 OSGi 配置一样简单。在我的例子中,我的 Angular 应用程序在端口 8000 上 运行 试图访问 4503 上的发布者。
之前的 AEM 6.3
我最终所做的(起初)是创建一个实现 AuthenticationInfoPostProcessor
的服务。在那里,我设置了以下 headers:
- Access-Control-Allow-Credentials
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
GET 请求一切正常。但是当我们尝试 POST 时,我们 运行 发现浏览器正在发送 pre-flight OPTIONS 请求失败,因为浏览器没有使用 login-token
cookie。
然后我们尝试了 @SlingFiter
,但是它属于正常的 sling 管道,因此它是在检查身份验证之后,所以没有身份验证 cookie,pre-flight 总是会失败。
最后,我们实现了一个带有以下注解的过滤器:
@Component(immediate = true)
@Service(value = Filter.class)
@Properties({ @Property(name = "pattern",
value = "/.*"),
@Property(name = Constants.SERVICE_RANKING,
intValue = 1000) })
这里的关键是 pattern
属性,它将过滤器注册为 Apache Felix Whiteboard 过滤器,而不是 Sling。 See here。因此过滤器将为 OPTIONS 和 return 设置 CORS headers,并为其他所有内容设置 CORS headers,并将请求传递给链中的下一个过滤器。