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.
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;
}
}
....
}
);
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 formysite
on the AEMaaCS instance 3) Create Front-End pipeline in Cloud Manager and run the Front-End pipeline formysite
5) Go to the Package Manager on the AEMaaCS instance, create package with/conf/mysite
filter, build and download the package 6) Recreatemysite
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 changeprefixPath
to point to local proxyhttp://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.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.Logs taken while reproducing problem
n/a