Laravel echo server with socket.io show 404 blocked by CORS

Question

i'm trying to utilize laravel echo server combined with socket.io for my chat apps. But it shows an error that said

When i'm trying at my local device, the server is working fine, it can trigger and listen. But when i host on my vps at AWS EC2 service, it shows some error like i mentioned above. I've been stuck for 2 days already not knowing how to solve it. I'm using ubuntu 20.04, web server nginx, npm laravel-echo-server 1.6.2 and socket.io for client version 2.4. i already allow port that i'm using on my server

Here is my laravel-echo-server.json

{
"authHost": "https://domain",
"authEndpoint": "/broadcasting/auth",
"clients": [],
"database": "redis",
"databaseConfig": {
    "redis": {
        "redis": {
            "host":"127.0.0.1",
            "port":"6379"
        }
    },
    "sqlite": {
        "databasePath": "/database/laravel-echo-server.sqlite"
    }
},
"devMode": true,
"host": null,
"port": "6002",
"protocol": "http",
"socketio": {},
"secureOptions": 67108864,
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": "",
"subscribers": {
    "http": false,
    "redis": true
},
"apiOriginAllow": {
    "allowCors": true,
    "allowOrigin": "https:domain, http://localhost:8080",
    "allowMethods": "GET, POST",
    "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
}

}

And here is my server block configuration

server {
server_name domain.com www.domain.com;
root /var/www/domain/public;

index index.html index.htm index.php;

location / {
  # try_files $uri $uri/ =404;
  try_files $uri $uri/ /index.php$is_args$args;
}

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
 }

location ~ /\.ht {
    deny all;
}


listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot}

server {
if ($host = www.domain.com) {
    return 301 https://$host$request_uri;
} # managed by Certbot


if ($host = domain.com) {
    return 301 https://$host$request_uri;
} # managed by Certbot

listen 80;
listen [::]:80;
server_name domain.com www.domain.com;
return 404; # managed by Certbot  

location /socket.io/ {
    proxy_pass http://localhost:6002/;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
}

Here is my client code

window.Echo = new Echo({
  broadcaster: "socket.io",
  host: "https://back-lms.gamifindo.com:6002",
});

Any help would be appreciated. Thank you in advance!

Answer 1

I finally found the solution! Its on server block configuration all along. I moved this code to the upper of my server bracket tag, then it just works!

location /socket.io/ {
    proxy_pass http://localhost:6002/;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
}