GET request from Postman to AEM Forms is working but failing due to CORS from Ajax call from another website

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:

Must configure CORS in the publish instance, not the author instance.
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.
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.
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

Solution

Below is the solution to the problem:

Must configure CORS in the publish instance, not the author instance.
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.
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.
Check the updated Ajax call above.

If still doesn't work, enable DEBUG for CORS in the logger section.