AEM as Headless caching strategy

[rampai]

Hi All,

We have a requirement to support multiple different domains that will be consuming content from AEM using GraphQL APIs.

The problem that we are facing is that the response is caching the "Access-Control-Allow-Origin" headers which is causing the below scenario.

Suppose, I hit the AEM GraphQL endpoint from "domainA", AEM sends "Access-Control-Allow-Origin: domainA" as part of the response which is cached.

Now, when I hit the AEM GraphQL endpoint from "domainB", the cached response with "Access-Control-Allow-Origin: domainA" gets returned instead of "Access-Control-Allow-Origin: domainB" which causes CORS issue.

Is there a way to vary the response based on the origin for the GraphQL endpoint?

Thanks,

Ram

[ChitraMadan · Accepted solution]

Hi @rampai ,

You can allow all origins by replacing the domain with * but generally this is not recommended as it is not too secure. You can try this approach to find the domain from the request and add that domain in the response.

With .htaccess you can do it like this:

# ----------------------------------------------------------------------
# Allow loading of external fonts
# ----------------------------------------------------------------------
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)? (google.com|staging.google.com|development.google.com|otherdomain.example|dev02.otherdomain.example)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header merge Vary Origin
    </IfModule>
</FilesMatch>