CORS issue blocks fetch resources from local proxy server

[karol-pawelski-wttech]

Expected Behaviour

HTML page rendered by local AEM instance that uses local proxy server should be able to fetch resources (e.g. fonts) from the proxy.

Actual Behaviour

CORS policy blocks fetching resources from local proxy server as they do not contain CORS headers.

Reproduce Scenario (including but not limited to)

In our project setup we are using Front-End Pipelines & Site Themes and on AEM side we would like to use the proxy to host the Site Theme along with other resources (e.g. fonts).

Steps to Reproduce

1) Create sample site called mysite on AEMaaCS Author instance 2) Enable Front-End pipeline for mysite on the AEMaaCS instance 3) Create Front-End pipeline in Cloud Manager and run the Front-End pipeline for mysite 5) Go to the Package Manager on the AEMaaCS instance, create package with /conf/mysite filter, build and download the package 6) Recreate mysite on local AEM Author instance and set up front-end project (e.g. based on https://github.com/adobe/aem-site-template-standard-theme-e2e) 7) Go to the Package Manager on the local instance and install the downloaded package 8) Go to CR/DE on the local instance and change prefixPath to point to local proxy http://localhost:7001 in following node /conf/onexp/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content 9) In the front-end project add sample resource (e.g. font) and use the font in sass. E.g.

url('./resources/fonts/some-font.woff2') format('woff2'),

10) Starts the proxy server and open http://localhost:4502/content/mysite/us/en.html in browser 11) Observe that the font requests are blocked due to CORS issue in developer tools

Platform and Version

aem-sdk-2022.6.7904.20220629T070041Z-220600

Sample Code that illustrates the problem

Our suggest is to simple add CORS headers in proxy.js for all resources hosted by the proxy. As the proxy is used locally it does not raise any security issue.

app.use(
    function (req, res) {
      const files = listFiles(CONFIG.dir);
      ...
      for (const [request, filePath] of routeMap) {
        ...
        if (urlMatch && fs.existsSync(filePath)) {
          ...
          fs.createReadStream(filePath).pipe(res);
          res.setHeader('Access-Control-Allow-Origin', '*');
          res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
          res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, Authorization');
          return;
        }
      }
      ....
    }
  );

Logs taken while reproducing problem

n/a

[buuhuu]

Tracked in SITES-7510