Search code examples
vue.jswebpacksocket.iocorsvue-cli-3

Facing CORS policy or 404 not found vuejs and socket.io with npm run serve


I'm actually developing on my local machine.

I have a simple socket.io server running on my local machine:

const io = require('socket.io')();
io.listen(3000);

On my Vue-js application, I want to connect a socket.io-client

import socketio from 'socket.io-client'
const io = socketio('http://localhost');

I run my serve with : npm run serve

And in my console is writing:

Access to XMLHttpRequest at 'http://127.0.0.1:8080/socket.io/?EIO=3&transport=polling&t=M_JIr4_' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried to set my vue.config.js file like this:

// vue.config.js
module.exports = {
    // options...
    devServer: {
        proxy: 'http://localhost/',
    }
  }

And my client like this:

import socketio from 'socket.io-client'
const io = socketio('http://localhost:8080');

It removes the CORS but then I get this in the console:

GET http://localhost:8080/socket.io/?EIO=3&transport=polling&t=M_JLsr5 404 (Not Found)

Is there a way to make it works on the localhost?

PS: I generated my project with @vue/cli


Solution

  • If it can help someone else:

    I reboot my computer, deleted vue.config.js and replaced

    import socketio from 'socket.io-client'
    const io = socketio('http://localhost');
    

    by

    import socketio from 'socket.io-client'
    const io = socketio('http://localhost:3000');
    

    Looking like it solved my problem.