How to Enable CORS in CRXDE Lite/AEM

Question

We use CRX DE lite/Adobe EM as our backend for our Angularjs SPA UI/frontend. How can we set CORS for this backend technology? We have access to the tool http://localhost:4502/crx/de/index.jsp to change settings. But we are not sure how to set CORS enabled.

Please advice.

Answer 1

As of AEM 6.3 There is an OOTB service called Adobe Granite Cross-Origin Resource Sharing Policy. It was as easy as creating an OSGi configuration with the alloworigin=[http://localhost:8000] property. In my case, my Angular application was running on port 8000 trying to access the publisher on 4503.

Prior AEM 6.3 What I wound up doing (at first) was creating a service that implemented AuthenticationInfoPostProcessor. There, I set the following headers:

• Access-Control-Allow-Credentials
• Access-Control-Allow-Origin
• Access-Control-Allow-Methods

And everything was fine for GET requests. But when we tried POST, we ran into the issue that the browser was sending the pre-flight OPTIONS request which was failing because the browser was not doing it with login-token cookie.

Then we tried a @SlingFiter, however that falls in the normal sling pipeline, therefore it was after authentication was checked, so having no auth cookie, the pre-flight would always fail.

Finally, we implemented a filter with the following annotations:

@Component(immediate = true)
@Service(value = Filter.class)
@Properties({ @Property(name = "pattern",
                        value = "/.*"),
              @Property(name = Constants.SERVICE_RANKING,
                        intValue = 1000) })

The key here was the pattern property, which registers the filter as an Apache Felix Whiteboard filter, not Sling. See here. So the filter will set CORS headers for OPTIONS and return, and set CORS headers for everything else, and pass the request to the next filter in the chain.

Answer 2

I don't know where to enable CORS in AEM (or if it's possible at all, I'd look in the OSGi console http://localhost:4502/system/console/configMgr if anywhere) but one way to work around CORS issues would be to expose AEM and the frontend in the same domain, which should be fairly easy by setting up a proxy on Apache.

On the Apache server in front of your AEM publish instance, in the httpd.conf, you could do something like this:

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/