Issue
- After setting up a CDN for static resources, some backend functionalities, such as buttons and dynamic functionalities, stop working.
- Browser console displays CORS errors when trying to access resources through the CDN.
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- Additionally, SVG icons embedded using <use> tags are not displayed.
Environment
- DXP 2024.Q3.1
- Using a CDN like Akamai.
Resolution
The following steps may help resolve the errors, but they do not provide a complete solution due to product limitations:
-
CORS errors: The CORS exception is caused by the CDN not including the
Access-Control-Allow-Origin
header with the domain serving the resources. This should be handled in the CDN configuration.- Include the domain serving the portal in the CDN's CORS settings to prevent CORS blocks from the browser.
- See Akamai CORS documentation for specific instructions on adding the header.
-
Embedded SVG resources: Include the SVG for Everybody library in your theme. This library acts as a polyfill and might solve the CORS errors related to embedded SVG loaded through
<use>
tags. This only solves the SVG-related issue.
Some backend functionalities might be impacted even after applying the changes above due to product limitations. Liferay is working on improving CDN support in future releases.
Additional Information