Nuxt•4mo ago

Nuxt socket.io CORS error

Hi, if I have a nuxt application behind a reverse proxy (nginx), should I set up CORS only in nginx or also in nuxt?

18 Replies

im running an app behind reverse proxy as well, i dont remember setting anything specifically for cors

RushOP•4mo ago

you must have set something up, although maybe not cors cors is needed if you want to access the server from a different address than the one where nuxt is running

Archerist•4mo ago

https://enable-cors.org/server_nginx.html

enable cross-origin resource sharing

CORS support site

Archerist•4mo ago

i found this as an example

RushOP•4mo ago

i found that too, but it doesnt answer my question

Archerist•4mo ago

oh yea just nginx should be fine

RushOP•4mo ago

But normally it would be necessary to configure the allowed origins in nuxt. Why doesn't it have to be done there if it is previously in nginx?

Archerist•4mo ago

i mean it doesnt matter as long as you set the headers, if you set them in nuxt nginx will forward it straight, if you set them in nginx it will just add the headers to the response. output is gonna be the same, i think

RushOP•4mo ago

if i set them in nuxt, it doesnt work because nginx is blocking it nginx.conf:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name _;

    deny all;
}

server {
    listen 80;
    listen [::]:80;

    # cloudflare ips
    allow 103.21.244.0/22;
    allow 103.22.200.0/22;
    allow 103.31.4.0/22;
    allow 104.16.0.0/13;
    allow 104.24.0.0/14;
    allow 108.162.192.0/18;
    allow 131.0.72.0/22;
    allow 141.101.64.0/18;
    allow 162.158.0.0/15;
    allow 172.64.0.0/13;
    allow 173.245.48.0/20;
    allow 188.114.96.0/20;
    allow 190.93.240.0/20;
    allow 197.234.240.0/22;
    allow 198.41.128.0/17;

    server_name my-domain.com;

    location / {
        proxy_pass http://my-app-1:3000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Uri $request_uri;
        proxy_set_header X-Forwarded-Host $host;
    }
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name _;

    deny all;
}

server {
    listen 80;
    listen [::]:80;

    # cloudflare ips
    allow 103.21.244.0/22;
    allow 103.22.200.0/22;
    allow 103.31.4.0/22;
    allow 104.16.0.0/13;
    allow 104.24.0.0/14;
    allow 108.162.192.0/18;
    allow 131.0.72.0/22;
    allow 141.101.64.0/18;
    allow 162.158.0.0/15;
    allow 172.64.0.0/13;
    allow 173.245.48.0/20;
    allow 188.114.96.0/20;
    allow 190.93.240.0/20;
    allow 197.234.240.0/22;
    allow 198.41.128.0/17;

    server_name my-domain.com;

    location / {
        proxy_pass http://my-app-1:3000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Uri $request_uri;
        proxy_set_header X-Forwarded-Host $host;
    }
}

do i need to setup it somehow to allow nginx to forward the nuxt cors headers?

Archerist•4mo ago

well you are not sending your nginx conf or any code, so all i can do is guess oh nvm you mean the whole request or just the headers?

RushOP•4mo ago

i mean that i get the cors origin error in console when trying to connect to websocket with configured cors origin in nuxt

Archerist•4mo ago

well you are gonna get the cors error if the clients get 4xx/5xx responses as well

RushOP•4mo ago

its this error in console from origin 'http://localhost:3000/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Archerist•4mo ago

check the network tab

RushOP•4mo ago

for what should i look there?

Archerist•4mo ago

status codes, nuxt errors, nginx errors you can also check nginx logs to see whats up

RushOP•4mo ago

@Archerist I tried it on localhost with different ports and the error is same

import type { NitroApp } from "nitropack";
import { Server as Engine } from "engine.io";
import { Server } from "socket.io";
import { defineEventHandler } from "h3";
import { registerSocketHandlers } from "../sockets";
import { createServer } from "http";

export default defineNitroPlugin((nitroApp: NitroApp) => {
  const engine = new Engine();
  
  const httpServer = createServer();
  const io = new Server(httpServer, {
    cors: {
      origin: "http://localhost:3000",
    }
  });

  io.bind(engine);

  registerSocketHandlers(io);

  nitroApp.router.use("/socket.io/", defineEventHandler({
    handler(event) {
      engine.handleRequest(event.node.req, event.node.res);
      event._handled = true;
    },
    websocket: {
      open(peer) {
        const nodeContext = peer.ctx.node;
        const req = nodeContext.req;

        // @ts-expect-error private method
        engine.prepare(req);

        const rawSocket = nodeContext.req.socket;
        const websocket = nodeContext.ws;

        // @ts-expect-error private method
        engine.onWebSocket(req, rawSocket, websocket);
      }
    }
  }));
});

import type { NitroApp } from "nitropack";
import { Server as Engine } from "engine.io";
import { Server } from "socket.io";
import { defineEventHandler } from "h3";
import { registerSocketHandlers } from "../sockets";
import { createServer } from "http";

export default defineNitroPlugin((nitroApp: NitroApp) => {
  const engine = new Engine();
  
  const httpServer = createServer();
  const io = new Server(httpServer, {
    cors: {
      origin: "http://localhost:3000",
    }
  });

  io.bind(engine);

  registerSocketHandlers(io);

  nitroApp.router.use("/socket.io/", defineEventHandler({
    handler(event) {
      engine.handleRequest(event.node.req, event.node.res);
      event._handled = true;
    },
    websocket: {
      open(peer) {
        const nodeContext = peer.ctx.node;
        const req = nodeContext.req;

        // @ts-expect-error private method
        engine.prepare(req);

        const rawSocket = nodeContext.req.socket;
        const websocket = nodeContext.ws;

        // @ts-expect-error private method
        engine.onWebSocket(req, rawSocket, websocket);
      }
    }
  }));
});

is there something wrong? this runs on port 8000 and frontend on port 3000 so i am allowing that origin

Archerist•4mo ago

so you have engine io server, socket io server, http server and nitro server all at the same time? well this is outside of my knowledge sorry

Gaming

Programming

Nuxt socket.io CORS error