Expand my Community achievements bar.

SOLVED

Allow localhost in CORS headers

Avatar

Community Advisor

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?

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

9 Replies

Avatar

Community Advisor

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.

 



Esteban Bustamante

Avatar

Community Advisor

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?

 

Avatar

Community Advisor

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... 



Esteban Bustamante

Avatar

Administrator

@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. 



Kautuk Sahni

Avatar

Community Advisor

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/ 



Arun Patidar

Avatar

Correct answer by
Community Advisor

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.

Avatar

Community Advisor
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 *.



Arun Patidar

Avatar

Community Advisor

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