1

I am using the following Ajax call from an external website to embed an AEM Form in the host application (the external website). The Ajax call is failing with the CORS error. The same GET request from Postman is successful. The GET request is sent to AEM Author JEE Instance based on CentOS 7.

I executed the same Ajax call from another AEM Form webpage, and I got a valid response.

I did follow everything possible to enable CORS in AEM, see the online docs I followed:

https://docs.adobe.com/content/help/en/experience-manager-65/forms/adaptive-forms-basic-authoring/embed-adaptive-form-external-web-page.html

https://docs.adobe.com/content/help/en/experience-manager-learn/foundation/security/develop-for-cross-origin-resource-sharing.html

https://docs.adobe.com/content/help/en/experience-manager-learn/foundation/security/understand-cross-origin-resource-sharing.html

Ajax API Call:

    $.ajax
    ({
      type: "GET",
      url: "http://ame_publish:4003/content/forms/af/path_to_aem_form/form_name.html/jcr:content/guideContainer.html",
      data: {wcmmode:"disabled", key:"some key values"},
      headers: {token:"token value in the header section"},
      success: function (prmResults){
        console.log('GET Response, prmResults = ', prmResults); 
      },
      error: function(prmErr){console.log("Error:", prmErr);},
      fail: function(){console.log("Fail: ", prmErr)}
    });

Questions:

  • What else I missed to enable CORS on AEM?
  • Why Postman is working fine, but failing if called form another website?
  • When the response is returned, it is an HTML with references to resources that are hosted on the AEM Forms server. Such resources can be CSS, JS, and images. How such resources can be mapped to the hosting application that invoked the API. If such resources cannot be accessed from the hosting application, the AEM Form will be broken.

I appreciate your help.

UPDATE 1: It is working now. Check the following:

  1. Must configure CORS in the publish instance, not the author instance.

  2. Go to configMgr > Adobe Granite Cross-Origin Resource Sharing Policy. Add the needed header item passed in the Ajax call in the headers object, add it to the supported headers and add the allowed methods (GET, OPTIONS...etc). OF course, you must allow the Origin as needed.

  3. Got to configMgr > Apache Sling Referrer Filter, and remove the allowed methods from Filter Methods. Make sure to delete the allowed methods form the "filter methods". Make sure that the OPTIONS method is allowed in both cases. Configure the other parts as needed.

  4. Check the updated Ajax call above.

If still doesn't work, enable DEBUG for CORS in the logger section. If you need help, please send me a message.

Still Pending:

Now the returned response is a perfect HTML but all URL references are relative. The trick now is how to make them absolute to AEM Server or how to force the Ajax call to return absolute references for ALL URLs? In the help document from Adobe, then mention something about reverse proxy. Any other idea?

We thought about using iFrame but the problem now is that after the data entry is done with the form, we need to pass the control back to the host application and pass the form data back to the host app. We need to use some sort of a callback method or navigate to a URL. But when using iFrame it looks like this is not possible. Using Ajax, allows you to embed the HTML as inner HTML inside a DIV element in the host app. We are trying now to parse the HTML result to replace all URLs inside the HTML to be absolute. I am just thinking if there are other options.

Initial testing after using Ajax HTML response and parsing all the URLs to be absolute looks like is working so far with some minor issues.

Tarek

tarekahf
  • 738
  • 1
  • 16
  • 42
  • you can check this for #2 https://stackoverflow.com/questions/20035101/why-doesn-t-postman-get-a-no-access-control-allow-origin-header-is-present-on. Can you post the error? – Pakira Jul 15 '20 at 16:19
  • It working now. CORS config must be done on the publish instance not the author instance. Then, we must configure supported headers (header item passed in headers of the Ajax request) and add allowed methods (GET) in configMgr > Adobe Granite Cross-Origin Resource Sharing Policy, and remove the allowed methods from Apache Sling Referrer Filter > Filter Methods. Make sure to delete the allowed methods form the "filter methods". Make sure that OPTIONS method is allowed in both cases. I will add a solution soon. – tarekahf Jul 15 '20 at 19:19
  • You probably want to take the *“It is working now”* update you made to the question, and create an actual answer from it. At Stack Overflow, it’s OK — and even encouraged — to self-answer your own question, in cases where you find the answer yourself. And then you should take the *“Still Pending”* part of the question and turn it into a separate, new question. Questions that that contain multiple disparate sub-questions are highly discouraged at Stack Overflow, and put your question at risk of being downvoted and closed as *“Needs more focus”*. – sideshowbarker Jul 15 '20 at 23:04
  • OK, will do that shortly. I just wanted to document my findings before I lose them. – tarekahf Jul 16 '20 at 16:14

0 Answers0