How can i enable CORS

[paulocoutinhox]

Hi,

How can i enable CORS:

Access to fetch at 'https://mega.site.com/matchmake/joinOrCreate/game_room' from origin 'https://aaa.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Thanks.

[Wenish]

whats cors: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

you can use this cors package:
https://www.npmjs.com/package/cors

you have to allow your domain where your webclient (frontend) is hosted.

[paulocoutinhox]

I made it works locally, but i think that is something wrong on Nginx or Cloudflare, but maybe Nginx.

server {
    listen 80;
    server_name xyz.game.com;

    location / {
        # Redirecionamento para o serviço game
        proxy_pass http://game:3000/;
        
        # Configuração necessária para WebSockets
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        
        # Remover cabeçalhos CORS que vêm do backend
        proxy_hide_header 'Access-Control-Allow-Origin';
        proxy_hide_header 'Access-Control-Allow-Credentials';
        proxy_hide_header 'Access-Control-Allow-Methods';
        proxy_hide_header 'Access-Control-Allow-Headers';
        
        # Configuração CORS liberada para todas as origens
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD' always;
        add_header 'Access-Control-Allow-Headers' '*' always;
        
        # Tratamento especial para requisições OPTIONS (preflight)
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD';
            add_header 'Access-Control-Allow-Headers' '*';
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

[paulocoutinhox]

I made it works for custom routes /hello_world, but for all colyseus things it have CORS problem.

Access to fetch at 'https://xyz.com/matchmake/joinOrCreate/game_room' from origin 'https://xyz.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

But for https://xyz.com/hello_world it works, see:

const config = require("@colyseus/tools").default;
const { monitor } = require("@colyseus/monitor");
const { playground } = require("@colyseus/playground");
const cors = require("cors");
const { matchMaker } = require("@colyseus/core");
const basicAuth = require("express-basic-auth");

/**
 * Import your Room files
 */
const { GameRoom } = require("./rooms/GameRoom");

// Lista de origens permitidas para CORS
const allowedOrigins = ["https://xyz.netlify.app", "http://localhost:1234"];

// Middleware de CORS manual para controle mais preciso
const corsMiddleware = (req, res, next) => {
    const origin = req.headers.origin;
    
    if (allowedOrigins.includes(origin)) {
        res.header("Access-Control-Allow-Origin", origin);
        res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        res.header("Access-Control-Allow-Headers", "Authorization, Content-Type, Accept, Origin, X-Requested-With");
        res.header("Access-Control-Allow-Credentials", "true");
        res.header("Vary", "Origin");
    }

    if (req.method === "OPTIONS") {
        return res.status(204).end();
    }

    next();
};

// Proteção do monitor com autenticação básica
const basicAuthMiddleware = basicAuth({
    users: { xyz: "xyz" },
    challenge: true
});

module.exports = config({
    initializeGameServer: (gameServer) => {
        /**
         * Define your room handlers:
         */
        gameServer.define("game_room", GameRoom);
    },

    initializeExpress: (app) => {
        /**
         * Configuração do CORS
         */
        app.use(corsMiddleware);

        /**
         * Bind your custom express routes here:
         */
        app.get("/hello_world", (req, res) => {
            res.send("Game Server running!");
        });

        /**
         * Use @colyseus/playground
         * (It is not recommended to expose this route in a production environment)
         */
        if (process.env.NODE_ENV !== "production") {
            app.use("/", playground());
        }

        /**
         * Bind @colyseus/monitor
         * It is recommended to protect this route with a password.
         */
        app.use("/monitor", basicAuthMiddleware, monitor());
    },

    beforeListen: () => {
        /**
         * Before gameServer.listen() is called.
         */
        console.log("Game Server starting...");
    }
});

[paulocoutinhox]

I solved the problem. The nginx config need be this:

server {
    listen 80;
    server_name server.game.com;

    location / {
        # Redirecionamento para o serviço game
        proxy_pass http://game:3000/;
        
        # Configuração necessária para WebSockets
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        
        # Remover cabeçalhos CORS do backend para evitar conflito
        proxy_hide_header 'Access-Control-Allow-Origin';
        proxy_hide_header 'Access-Control-Allow-Credentials';
        proxy_hide_header 'Access-Control-Allow-Methods';
        proxy_hide_header 'Access-Control-Allow-Headers';

        # Configuração CORS apenas para as origens permitidas
        set $cors_origin "";
        if ($http_origin ~* ^(https://mygame.netlify.app|http://localhost:1234)$) {
            set $cors_origin $http_origin;
        }

        add_header 'Access-Control-Allow-Origin' $cors_origin always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, X-Requested-With' always;
        add_header 'Vary' 'Origin' always;

        # Tratamento especial para requisições OPTIONS (preflight)
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' $cors_origin;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD';
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, X-Requested-With';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}