Getting CORS error on JS Ajax API call on AEM frontend

[satyam_kumar_07]

Hi everyone, 

I am getting this error while calling the API by using js Ajax.

Access to XMLHttpRequest at 'third party API url' from origin 'origin url' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have connected with the backend team but they don’t have any cors configuration and suggested me to check from my side.

How can I fix this from AEM side?

[EduTechXperience_]

You would need to route this request via proxy servlet or dispatcher, you can also do it from FE but it may be vulnerable. Try below and see if this is helpful:

1. Use a Proxy Servlet: Set up a proxy servlet in AEM to forward requests to the third-party API. This way, the request is made from the AEM server rather than directly from the client.

2. AEM Dispatcher Configuration: If you are using AEM Dispatcher, configure the dispatcher to handle CORS headers.

3. Apache Sling Referrer Filter Configuration: Adjust the Sling Referrer Filter settings in AEM to allow the desired origins.
   
   

But these changes has to be done by Backend AEM team members.

[MukeshYadav_ · Accepted solution]

Hi 

When we try to access  to a different domain than the page url domain, we get this error. So the browser is blocking it as it usually allows a request in the same origin for security reasons.

You may use backend Servlet to call third party api and call that servlet in frontend or based on the scenario you may open in new window or whatever possible

[h_kataria]

You backend team only will have to whitelist your AEM instance URL. Lets say you are calling this API from your dev publish instance then that dev instance URL will have to be whitelisted by this third party backend by adding the URL in Access-Control-Allow-Origin response header. Once your URL is present in that header, you should not get CORS error anymore.

[pulkitvashisth]

Hi @satyam_kumar_07 
Can you check your CORS configuration at AEM 
"Adobe Granite Cross-Origin Resource Sharing Policy" at /system/console/configMgr

Check the "Allowed Paths" property value in the configuration (its ".*" by default , means all paths are allowed) . If comma separated paths are available, add the path that you want to allow in the configuration.

Also keep in mind that above is not recommended.

Ideal way would be to create your own servlet and service to call the API and serve it  at your FE.

[arunpatidar]

Hi @satyam_kumar_07 
Can you please explain what API(domain) are you calling and from which domain?

[satyam_kumar_07]

its external API url , 

dummy api like https://avscan.dummy.net/api  and we are calling from aem dispatcher domain url.

[kautuk_sahni]

@satyam_kumar_07 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!