Allow localhost in CORS headers

[iamnjain]

Hello,

We have a Proxy pass setup to downstream systems in AEM Dev Environment which is development and test enviroment. While frontend team development, they are hitting AEM Dev server on localhost and facing CORS error.

So, what would be that right approach for this while developing on localhost?

[EstebanBustamante]

Hi 

You need to configure the OSGI Service "Adobe Granite Cross-Origin Resource Sharing Policy", here is the official documentation explaining how to set it up: https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/understand-cros... And here is an article that shows how to enable CORS for external domains: https://www.albinsblog.com/2021/10/how-to-deliver-headless-content-through-graphql-api-and-content-f... 

A couple of things you need to keep in mind are:

- Usually, the CORS performs a preflight call, hence, you may need to add the OPTIONS method as part of the above configuration

- Check which CORS header your application is expecting to validate as a valid resource as this can vary

- If you are trying to do a POST operation on an author instance, you will also have CRSF issues, if so, read this https://www.albinsblog.com/2023/03/what-is-csrf-how-is-csrf-protection-enabled-in-aem.html to fix that as well. 

Hope this helps.

[iamnjain]

Hi @EstebanBustamante 

But my request is not hitting to AEM Instance, it's being proxy passed from Dispatcher server. How to allow localhost on Dispatcher itself?

[EstebanBustamante]

Sorry for that @iamnjain, if you need to add the headers in the dispatcher just use something like this:

Header always set Access-Control-Allow-Origin "*"

Please check the section "Enabling the header through Apache" from this article: https://www.albinsblog.com/2018/08/how-to-enable-cross-origin-resource-sharing-support-in-aem.html 

Also, consider that these headers must be allowed in the dispatcher's /clientheaders config: 

https://experienceleague.adobe.com/docs/experience-manager-learn/foundation/security/understand-cros... 

[kautuk_sahni]

@iamnjain Do you find the suggestions from Esteban useful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. 

[arunpatidar]

Hi @iamnjain 
If you are using google chrome browser then you can override CORS header locally in the browser

https://developer.chrome.com/docs/devtools/overrides/ 

[iamnjain · Accepted solution]

So I used below expression in Virtual host file

Header set Access-Control-Allow-Origin "*"

and did a dispatcher deployment. So It's started working as it's allow everything.

@arunpatidarI suggested to use CORS blocker plugin to FED team, but after internal discussion, we thought of allowing all on Dev env since it's for development purpose only.

Thanks @EstebanBustamante as well for your suggestions.

[arunpatidar]

Header set Access-Control-Allow-Origin "*"

This will allow all the domains(external) to use/consume AEM content. You should be not using * , instead of use whitelisted domain here.

If it is just temporary then you can use *.

[iamnjain]

How to use whitelisted domain? If you can help with one example syntax, please.

[arunpatidar]

https://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains

https://www.gulla.net/en/blog/access-control-allow-origin-with-multiple-origin-domains-cors/