Cross-Origin Resource Sharing (CORS) is an industry-standard mechanism that tells browsers to validate rights for accessing resources by one domain (Domain 1 – Parent) from another domain (Domain 2- Origin).

When a page loads, the browser by default enforces the “Same-origin Policy“, which basically means that it only allows content to be accessed from the same domain where the webpage is hosted.

CORS policy is not required if the resources, being accessed by an application, are hosted on the same domain.

CORS policy becomes relevant when businesses use the CDN (content delivery network) services to host their files. Using a CDN network increases efficient resource management and faster loading of the pages.

When the website page or an application tries to execute files or access resources from the CDN network, CDN refuses access to the files because a different domain is trying to access its files. This is done to avoid a security breach else it can be exploited by hackers to access files.

On a similar note, Amazon S3 (Simple Storage Service) files, which businesses and Enterprises use to store data of any type, can only be accessed through the APIs provided. Amazon implements an access control mechanism through coarse-grained access controls and fine-grained access controls.

Coming back to the topic of this post, recently our developer team ran into the CORS policy issue when the audio player (WavePlayer) our client had purchased was unable to access the audio files or run the audio file. The client was using the DigitalOcean CDN network for their audio and video files.

DigitalOcean offers Spaces Object storage service with built-in content delivery network (CDN). Spaces object storage service is compatible with Amazon S3.

After searching for the problem, we found in the browser console that the CDN was blocking access to the audio files by the player. The error was related to missing proper CORS policy in the CDN.

We had to properly set-up the CDN for cross policy no ‘access-control-allow-origin’ settings along with other settings as can be seen in the image below.

Log in to your server or the CDN control panel and go to the settings of the CDN and Add new configurations to enable various allowed methods (GET/PUT/POST/HEAD etc) and headers.

If there are already some settings enabled, you can Edit the existing CORS configurations to add more “Allow Methods”.

When the cors policy of your CDN is configured properly, it will allow access to the resources. So, when we enabled “GET” allowed methods in the cors policy in the CDN along with specifying the Origin domain name, the audio player started playing audio files.

The Origin is basically the Domain name with the protocol defined (https:// or http://).

With the popularity of the cloud storage and CDN network for keeping dynamic and static data separate, a proper Cross-Origin Resource Sharing (CORS) policy will help allow access to secured files for the website or plugins or even Mobile apps as the case may be.