How to Enable CORS in CRXDE Lite/AEM

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.

Solution

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.