adobe / adobe/aem-site-theme-builder
CORS issue blocks fetch resources from local proxy server
- Dominant language
- JavaScript
- Stars
- 9
- Forks
- 13
- PR merge metrics
- No merged PRs in 30d
Description
### 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
Contributor guide
Research direction
Start in proxy.js, where the local proxy maps requests to files and streams matching resources. Reproduce the font request from the described local AEM setup and inspect the browser's CORS error. Done means resources hosted by the proxy include the needed CORS response headers and the font loads from the rendered page.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- backend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100