Skip to main content

Static resources CORS configuration

Objective

Learn how to configure your server to allow cross-origin access from PuzzleMe for static resources like images, fonts, animations, and sounds.

Overview​

To be able to load static resources (such as images for jigsaw puzzle images, font files, animations, sounds, and other assets) from your server, you need to configure Cross-Origin Resource Sharing (CORS) headers. This allows PuzzleMe to fetch and process these resources from the [*].amuselabs.com domain. Please replace [*] with the subdomain provided to you (For example: cdn-x.amuselabs.com or cdn-y.amuselabs.com).

The Access-Control-Allow-Origin header must be present, and https://[*].amuselabs.com must be set to one of the allowed origins. This needs to be configured at your server end.

Why CORS is needed​

Modern browsers enforce the Same-Origin Policy as a security measure, which prevents websites from making requests to different domains. CORS (Cross-Origin Resource Sharing) is a web standard that allows servers to specify which domains can access their resources. Without proper CORS configuration, browsers will block requests to your static resources, causing them to fail to load in PuzzleMe.

Developers Guide​

AWS configuration​

Serving directly from S3​

To allow PuzzleMe to load and process static resources, an "Access-Control-Allow-Origin" CORS header needs to be present on the file server. The header also needs to specify the domains which are allowed to fetch and process the resources. This header can be set at a bucket level, so all files with public access in that bucket can be used with PuzzleMe.

You can set the CORS header using the instructions present in this AWS document.

Here is the CORS configuration that you need to add for the S3 bucket:

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://*.amuselabs.com",
            "https://amuselabs.com"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

Once you have enabled this CORS configuration, PuzzleMe is able to fetch and use the static resources.

Serving from S3 via Cloudfront distribution​

If you are using Cloudfront with your static resources being served from an S3 bucket, you need to configure the CORS setting in the S3 bucket (as shown above) first. Additionally, you also need to set the Response header policy name for your Cloudfront distribution behavior to Managed-CORS-With-Preflight.

You can edit an existing behavior as shown in the image below, or create a new behavior.

Edit distribution behavior

Go to the Response headers policy - optional setting, and make sure that the CORS-With-Preflight option is selected from the dropdown.

Edit distribution behavior

If you have multiple behaviors configured for your distribution, please ensure that the Managed-CORS-With-Preflight policy is applied to the behavior with the path pattern for your static resources in your S3 bucket.

WordPress​

The easiest way to modify the headers is via adding the appropriate directives in the .htaccess file present in the root directory of your WordPress installation. By default, editing the .htaccess file would enable CORS access to all the URLs on your website.

If you want to modify the CORS headers only for the wp-content directory (or another directory where you are serving the static resources from), please create a new .htaccess file only in the specific directory. We highly recommend this approach, to limit the files that have a cross origin sharing header present. The following should be added to the .htaccess file:

<IfModule mod_headers.c>
    <FilesMatch "\.(jpg|jpeg|webp|png|woff|woff2|ttf|eot|svg|mp4|webm|ogg|mp3|wav|gif|css|js)$">
          
          # The line below is a regex to match https://[*.]amuselabs.com[:valid_ports]
          # As per CORS specification, the server should set origin appropriately based on the subdomain
          SetEnvIf Origin ^(https?://(?:.+\.)?amuselabs\.com(?::\d{1,5})?)$   CORS_ALLOW_ORIGIN=$1
          
          Header append Access-Control-Allow-Origin  %{CORS_ALLOW_ORIGIN}e   env=CORS_ALLOW_ORIGIN
          Header merge  Vary "Origin"

    </FilesMatch>
</IfModule>

Troubleshooting​

If you're experiencing issues with static resources not loading in PuzzleMe, check the following:

  • Browser Console Errors: Look for CORS-related errors in your browser's developer console. Common error messages include "Access to fetch at '...' from origin '...' has been blocked by CORS policy."

  • Network Tab: In your browser's developer tools, check the Network tab to see if requests to your static resources are being blocked or returning 403/404 errors.

  • Header Verification: Ensure that the Access-Control-Allow-Origin header is present in the response headers for your static resources. The header should include your PuzzleMe domain.

  • File Type Coverage: Make sure your CORS configuration covers all the file types you're serving (images, fonts, animations, sounds, etc.). The WordPress example above includes common static resource file extensions for images, fonts, videos, audio, animations, and other web assets.

Table of contents