Allow localhost in CORS headers

Forum|Forum|2 years ago
September 11, 2023
4 replies
5007 views

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?

Best answer by iamnjain

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.

iamnjainAuthorAccepted solution

New Participant

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

New Participant

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

iamnjainAuthor

New Participant

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

arunpatidar

New Participant

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

kautuk_sahni

Employee

@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

EstebanBustamante

New Participant

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-cross-origin-resource-sharing.html?lang=en. 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-fragments-in-aem.html#.Y43LD3ZBw2z:~:text=Consume%20GraphQL%20API%20Data%20from%20External%20System%3A

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