Getting CORS error on JS Ajax API call on AEM frontend | Community
Skip to main content
S
satyam_kumar_07
June 25, 2024
Solved

Getting CORS error on JS Ajax API call on AEM frontend

  • June 25, 2024
  • 6 replies
  • 2684 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MukeshYadav_

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

6 replies

E
EduTechXperience_
Level 2
June 25, 2024

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_
    Community Advisor
    MukeshYadav_Community AdvisorAccepted solution
    Community Advisor
    June 25, 2024

    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
      Community Advisor
      h_katariaCommunity Advisor
      Community Advisor
      June 25, 2024

      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
        Community Advisor
        pulkitvashisthCommunity Advisor
        Community Advisor
        June 25, 2024

        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
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          June 25, 2024

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

          Arun Patidar
            S
            satyam_kumar_07Author
            June 26, 2024

            its external API url , 

            dummy api like https://avscan.dummy.net/api  and we are calling from aem dispatcher domain url.
              kautuk_sahni
              Community Manager
              kautuk_sahniCommunity Manager
              Community Manager
              June 25, 2024

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

              Kautuk Sahni
              Terms & ConditionsAccessibility statement

              Loading footer...