Troubleshooting CORS Errors Breaking Images, CSS, JavaScript, SVG Icons, and Backend Features with a CDN

Issue

• After setting up a CDN for static resources, buttons and other dynamic features stop working and fail to load, including JavaScript, CSS, and images. 

• Browser console displays Cross-Origin Resource Sharing (CORS) errors when trying to access CDN resources:

  Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  

Environment

• Liferay DXP 7.4 and Quarterly Releases
• A CDN serving static resources from a non-portal domain (e.g., Akamai) 

Resolution

• 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 by:
  1. Setting Up CORS, plus
  2. Configuring your CDN appropriately. Include the domain serving the portal in the CDN's CORS settings to prevent CORS blocks within browsers.
     • For the correct way to do so, refer to the resources available from your CDN provider (e.g., Akamai CORS documentation).

If resources still fail to load after these changes, check the browser console for more information about requests to the CDN domain that are still blocked.

Additional Information

• Serving Static Resources via a CDN