CORS still blocked after implementing CORS handling (Behind a proxy server)

[aryawpratama]

Describe the bug CORS still block my request after implementing CORS Handling form the documentation

To Reproduce

Please fill the following code example:

Socket.IO server version: 4.5.1

Server

Even tough I change the "*" in origin to my origin request it doesn't affect anything, it seems like this:

Socket.IO client version: 4.5.1

Client

I'm using Vue but I prefer to init the socket manually

The CORS Error log

I'm using ngrok instead of my VPS for development, but it happened in my VPS too

Thank you in advance!

[darrachequesne]

Hi!

Did you find a solution? At first sight, I'd say that the client is not able to reach the Socket.IO server, hence the missing headers. Could you please check?

Reference: https://socket.io/docs/v4/handling-cors/

[darrachequesne]

Closed due to inactivity, please reopen if needed.

[lautiamkok]

I am having this issue with version 4.6. It was working fine. Now not working at all. No idea why..

[darrachequesne]

@lautiamkok there was a change in v4.6.0 regarding middlewares https://github.com/socketio/engine.io/commit/24786e77c5403b1c4b5a2bc84e2af06f9187f74a

Are you able to reliably reproduce? You can fork the following fiddle: https://github.com/socketio/socket.io-fiddle/tree/cors

[lautiamkok]

@darrachequesne it seems that CORS issue has gone after adding a CORS middleware to my server app which is a Koa app, running on http://localhost:5000.

But now I have this new issue - I get a 404 for the URL below:

http://localhost:5000/socket.io/?EIO=4&transport=polling&t=OPAk3hO

Why is it calling that URL?

A screenshot of my screen:

[lautiamkok]

The code on client page that is calling the server:

// ./pages/users.vue
import io from 'socket.io-client'
const socket = io('http://localhost:5000/')

[darrachequesne]

It seems the client is not able to reach the Socket.IO server. How are you initializing the server?

Reference: https://socket.io/docs/v4/server-initialization/#with-koa

[lautiamkok]

@darrachequesne here is code:

import Koa from 'koa'
import { koaBody } from 'koa-body'
import serve from 'koa-static'
import cors from '@koa/cors'

import { createServer } from 'http'
import { Server } from 'socket.io'

const app = new Koa()

app.use(cors())
app.use(koaBody({
  multipart: true,
  parsedMethods: ['POST', 'PUT', 'PATCH', 'GET', 'HEAD', 'DELETE']
}))
app.use(serve('.'))
app.use(serve('./static/fixtures'))

const httpServer = createServer(app.callback())
const io = new Server(httpServer, {
  cors: {
    origin: 'http://localhost:3000'
  }
})

io.sockets.on('connection', socket => {
  //...
})

if (import.meta.env.PROD) {
  httpServer.listen(port, host)
  console.log(`🚀 Server ready at *:${port}`)
}

export const viteNodeApp = app

Have I missed anything?

[lautiamkok]

Oh! I know why:

export const viteNodeApp = app

I am using Vite and vite-plugin-node on top of my Koa app.

But I don't know how to integrate them properly. So I have to build the Koa app and run the built app so httpServer.listen(port, host) can be triggered. That means I can't run socket.IO on development.

Do you have any idea how to use socket.IO with Vite and vite-plugin-node?

[singhmona1]

hi, I am getting the same issue, I am connecting from localhost.

Access to XMLHttpRequest at 'http://my.domian.com/socket.io/?EIO=4&transport=polling&t=OcsJo4E' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

can you anyone suggest me what to do in this case?