How to configure CORS for Pley

When your game runs on Pley, it needs to communicate with your backend server. Browsers enforce a security rule called CORS (Cross-Origin Resource Sharing) to allow this. You don't have to set the CORS headers on mobile as the app is not running in a browser. To communicate with web browsers, you’ll need to configure your server to send requests acceptable by browers on Pley’s domain: https://*.pley.games. Here’s how to do it, even if you’re new to web development.

What You Need to Do

Configure your server to:

1. Allow requests from https://*.pley.games. All Pley requests come through [ID].pley.games.
2. Permit common methods like GET, POST, and OPTIONS.
3. Add the right CORS headers to its responses.

How-to:

1. Find Your Server Config: Look for where your backend handles requests (e.g., code, settings, or a dashboard).
2. Set Allowed Origins: Add https://*.pley.games as an allowed origin.
3. Define Allowed Methods: Include at least GET, POST, and OPTIONS.
4. Return CORS Headers: Ensure responses include Access-Control-Allow-Origin with the Pley domain.
5. Testing: You can test your implementation by launching the game on the web and opening the browser developer console (CTRL+Shift+i or F12 opens the menu on Windows in most browsers. Cmd + Opt + i on Mac.) If CORS is working, there should be no cross-origin related errors. Example:

Examples

Since every server is different, here are some examples. Adjust these to fit your setup.

Amazon S3

If your game files are on a service like Amazon S3, update its CORS policy. Paste this into your S3 bucket’s CORS settings. It tells S3 to allow Pley to access your game files. Since AWS supports wildcard characters (*), the config is very simple. Here’s a sample config:

[
  {
    "AllowedMethods": ["GET", "PUT", "POST"],
    "AllowedOrigins": ["https://*.pley.games"]
  }
]

Custom Server (C# Backend)

If you run a custom server, add logic to check the request’s Origin header and respond with CORS headers. Often, you can either allow all (*) or a single domain by default. A solution to this is to programmatically check if the origin ends with .pley.games.

Here’s a simple C# example:

const string ORIGIN_HEADER = "Origin";
const string PLEY_HOST_ENDING = "pley.games";

public static void AddCorsHeaderToResponse(
  string requestMethod, IDictionary<string, string> requestHeaders, APIGatewayProxyResponse response)
{
		if (!requestHeaders.TryGetValue(ORIGIN_HEADER, out var requestOrigin))
		{
		  // No Origin request header found
		  return;
		}

    if (!requestOrigin.EndsWith(PLEY_HOST_ENDING))
    {
		    // The Origin request header does not end with `.pley.games`
		    return;
    }
    
    if (response.Headers == null)
        response.Headers = new Dictionary<string, string>();
    response.Headers.Add("Access-Control-Allow-Origin", requestOrigin);
    if (requestMethod == "OPTIONS")
    {
        response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
        response.Headers.Add("Access-Control-Allow-Headers", "*");
    }
}