Getting a CORS error when trying to establish socket.io connection between back-end on localhost:3000 and front-end on localhost:8080

问题

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 index.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">
        Hello
    </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 -

Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=N6JFKSo' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
polling-xhr.js?d33e:268 GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=N6JFKSo net::ERR_FAILED

And on the back-end console I get errors like this one - GET /socket.io/?EIO=3&transport=polling&t=N6JFrfo 404 5.289 ms - 975

I can't figure out why is this happening.

回答1:

In index.js, add the following line below your important for socket.io:

io.origins('localhost:8080')

or if you want it for any domain:

io.origins('*:*')

Source

来源：https://stackoverflow.com/questions/61307739/getting-a-cors-error-when-trying-to-establish-socket-io-connection-between-back

标签

javascript

node.js

Socket.IO