CODEWITHSUNDEEP
node.jsangularnginxcorsmean
Takuya2412
Takuya2412

Reputation: 224

CORS Issue with socket.io in production (MEAN Stack)

I am using socket.io and it works fine in development. I am using the MEAN Stack and in development the socket connection is setup like this:

const port = process.env.PORT || 3000;
const server = http.createServer(app);

const io = require('socket.io')(server, {
   cors: {
      origins: ['http://localhost:4200'],
   },
});

which works fine.

In production though it does not work. I'm using Nginx with reverse proxy to serve my node.js server and my angular application.

I changed the settings to this

const app = express();
const port = process.env.PORT || 3000;
const server = http.createServer(app);

const io = require('socket.io')(server, {
   cors: {
      origin: 'http://travelinked.vm.mi.hdm-stuttgart.de',
      methods: ["GET", "POST"]
      credentials: true      
   }
});

but it still does not work.

Here is my Nginx config

server {
    listen 80;

    server_name http://travelinked.vm.mi.hdm-stuttgart.de;

    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
    }    

    location /api {
        rewrite /api/(.*) /$1  break;
        proxy_pass http://141.62.65.110:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

   location /socket.io {
        proxy_pass http://127.0.0.1:3000;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
  }
}

So my website is available on this website: http://travelinked.vm.mi.hdm-stuttgart.de/ And my backend: http://travelinked.vm.mi.hdm-stuttgart.de/api

Everything works except for the socket.io. Always get this problem here

enter image description here

The issue is that the link is wrong.. the api is missing. It should be like this http://141.62.65.110/api/socket.io/?EIO=4&transport=polling&t=Nbwq82Z but how can I add this??

EDIT:

For my frontend I have this BASE_URL which is the link to my endpoints in the backend

static readonly BASE_URL: string = 'http://141.62.65.110/api';

Here is the socket.io connection on my client

import { io } from 'socket.io-client';

@Injectable()
export class ChatService {
   private socket = io(`${ApiURLStore.BASE_URL}/`, { path: '/api' });
...

EDIT2: Seems socket.io make a connection but with the wrong URL. Here is a result of the network

enter image description here

So basically it connects to this connection? http://141.62.65.110/api/?EIO=4&transport=polling&t=Nbxuxae

The correct one should be like this I think: http://141.62.65.110:3000/api/socket.io/?EIO=4&transport=polling&t=Nbxuxae

Do I have to change the link in the frontend? Into like this: private socket = io('http://141.62.65.110:3000/', { path: '/api/socket.io' });

Upvotes: 0

Views: 235

Answers (1)

Maxoholic
Maxoholic

Reputation: 141

The problem is that /socket.io which is usually located in node root is blocked by the CORS. You need to specify the CORS policy for it inside the nginx server block. This should do the trick

location /socket.io {
    proxy_pass http://127.0.0.1:3000;
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
  }

EDIT: also you have rewrite directive inside your /api block which omits the /api/ from url

EDIT2: specify socket.io in require()

const io = require("socket.io")({
  path: "/api",
  ...

Upvotes: 1

Related Questions