-3

I'm trying to figure out how to create a real time chat application that uses Vue.js for the front-end, Node.js for the back-end and socket.io.

I've generated my back-end Node.js project with express-generator and the project is accessible at http://localhost:3000. In this project I have an app.js file that contains this:

var express = require('express');
var http = require('http').createServer(express);
var io = require('socket.io')(http);

io.on('connection', (socket) => {
    console.log('a user connected');
});

My front-end is a Vue.js project accessible from http://localhost:8080 and the component that is meant to connect to my back-end contains this:

<template>
    <div class="home">

    </div>
</template>

<script>
import socket from 'socket.io-client'

export default {
    mounted(){
        socket.connect('http://localhost:3000')
    }
}

</script>

Sadly the socket connection doesn't seem to go through. On the front-end console I get these errors - 

localhost/:1 Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=N6Kc6yn' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

And on the back-end console I get this error - GET /socket.io/?EIO=3&transport=polling&t=N6KcMan 404 3.089 ms - 975

I tried installing cors through npm install cors and added the required code but nothing really happened. It looks like this:

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

var http = require('http').createServer(express);
var io = require('socket.io')(http);

io.on('connection', (socket) => {
    console.log('A user has connected!');
});

I can't figure out why is this happening.

halfer
  • 19,824
  • 17
  • 99
  • 186
Onyx
  • 5,186
  • 8
  • 39
  • 86
  • I think you did a typo and are sending `express` where you should send your `app` in the command `var http = require('http').createServer(app);`. Therefore, the cors middleware will also be included in your server instance. – Claudio Busatto Apr 19 '20 at 22:55
  • I tried that as well but didn't change a thing. The thing is I have so few lines of code and I just can't see where the problem is. – Onyx Apr 19 '20 at 23:02
  • Hmm, that is strange! Let me mount the project on my machine! – Claudio Busatto Apr 19 '20 at 23:03
  • I think your problem is happening on the VueJS side. If you run [this small example](https://codesandbox.io/s/elastic-pike-itwdv?file=/src/index.js) I've created (you need to copy and run it in your local machine), you will see that the server side works well, and you get notified every time you open the `index.html` file on your browser. Have you tried to use your IP address (like, `192.168.0.1:3000`) instead of `localhost` on the Vue side? – Claudio Busatto Apr 19 '20 at 23:22
  • 1
    **First question.** Why are you using two servers? Socket.io can share your web server just fine. **Second question**, did you follow the advice given to you in the error where you can't use a wildcard for the the 'Access-Control-Allow-Origin' on the server if you're sending credentials? – jfriend00 Apr 19 '20 at 23:38
  • 2
    With minor wording differences, a very clear copy-paste of your last question: [Getting a CORS error when trying to establish socket.io connection between back-end on localhost:3000 and front-end on localhost:8080](https://stackoverflow.com/questions/61307739/getting-a-cors-error-when-trying-to-establish-socket-io-connection-between-back) – halfer Apr 22 '20 at 12:38

1 Answers1

-2

Try removing this -> app.use(cors()); if the problem persist you could have a bad path.

Oscar Rendón
  • 52
  • 1
  • 8
  • Removing that just gives me another CORS error - 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. – Onyx Apr 19 '20 at 23:06
  • Got it, so, try adding this -> io.origins('*:*') or this io.set('origins', '*:*'); – Oscar Rendón Apr 19 '20 at 23:10