'How to fix 400 error bad request in socket io?
I have a frontend application(VUE JS)
I have a backend (Nest JS)
Vue JS app get data from backend via websockets using vue-socket.io-extended library When Vue JS app starts I see errors in browser:
polling-xhr.js?d33e:229 POST http://localhost:11050/socket.io/?EIO=4&transport=polling&t=NMXgCF1 400 (Bad Request)
How can I fix this error?
I think it is not connected with library, I tried just socket io library and the result was the same.
Server is working, because it sends logs and show who is connected:
Server(Nest JS) main.ts file:
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors();
await app.listen(11050);
}
bootstrap();
App.gateway:
@WebSocketGateway()
export class AppGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
private logger: Logger = new Logger('AppGatway');
@SubscribeMessage('msgToServer')
handleMessage(client: Socket, text: string): WsResponse<string> {
return { event: 'msgToClient', data: text };
}
afterInit(server: Server) {
this.logger.log('Initialised!');
}
handleConnection(client: Socket, ...args: any[]): any {
this.logger.log(`Client connected: ${client.id}`);
}
handleDisconnect(client: Socket): any {
this.logger.log(`Client disconnected: ${client.id}`);
}
}
Frontend(Vue JS):
import VueSocketIOExt from "vue-socket.io-extended";
import Vue from "vue";
import io from "socket.io-client";
const socket = io("http://localhost:11050/");
Vue.use(VueSocketIOExt, socket);
data: () => ({
socket: null,
connection: null,
sockets: {
connect() {
console.log("socket connected");
},
},
}
Solution 1:[1]
I ran into this issue today using a very similar NestJS implementation, however my frontend is written with ReactJS. I believe the issue is related to mismatched socket.io server and client versions.
I resolved this issue by downgrading the version of socket.io-client from ^3.0.0 down to ^2.3.0.
Solution 2:[2]
Try below configuration on server side
const io = require('socket.io')(server, {
cors: {
origin: "http://localhost:8100",
methods: ["GET", "POST"],
transports: ['websocket', 'polling'],
credentials: true
},
allowEIO3: true
});
Solution 3:[3]
remember, the origin is the server from request
const io = SocketIO(server,{
cors: {
origin: "http://localhost",
methods: ["GET", "POST"],
credentials: true,
transports: ['websocket', 'polling'],
},
allowEIO3: true
})
Solution 4:[4]
I had a similar issue and fixed it by changing socket.io.js file version to the same as your socket.io package version.
Solution 5:[5]
I resolved this issue by downgrading the version of socket.io-client in my client from ^3.2.0 down to ^2.3.1.
My package.json client in ReactJs:
"dependencies": { "@testing-library/jest-dom": "^5.11.8", "@testing-library/react": "^11.2.3", "@testing-library/user-event": "^12.6.0", "@types/jest": "^26.0.20", "@types/node": "^12.19.12", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "moment": "^2.29.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-moment": "^1.1.1", "react-scripts": "4.0.1", "socket.io-client": "^2.3.1", "typescript": "^4.1.3", "web-vitals": "^0.2.4" }
And in my server with Nestjs as API REST and SocketServer, my package.json is:
"dependencies": { "@nestjs/common": "^7.5.1", "@nestjs/config": "^0.6.1", "@nestjs/core": "^7.5.1", "@nestjs/mongoose": "^7.2.1", "@nestjs/platform-express": "^7.5.1", "@nestjs/platform-socket.io": "^7.6.5", "@nestjs/swagger": "^4.7.10", "@nestjs/websockets": "^7.6.5", "class-validator": "^0.13.1", "mongoose": "^5.11.11", "reflect-metadata": "^0.1.13", "rimraf": "^3.0.2", "rxjs": "^6.6.3", "swagger-ui-express": "^4.1.6" }
hope this helps you, regards
Solution in:Gitlab report
Solution 6:[6]
You need to use the same version, both on the client and on the server
Solution 7:[7]
fixed mine by updating socket.io.js file
Solution 8:[8]
Solution socket v3, add
allowEIO3: true
Solution 9:[9]
Had this issue with the following code:
App.js
const io = require('socket.io')(server, {pingTimeout: 60000});
clientSocket.js
var socket = io("http://localhost:3003/")
I had to add "allowEIO3: true" as Rahit mentioned, but also had to change from localhost to my IP address.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow