laravel vuejs socket.io Access-Control-Allow-Origin

Question

hello laravel i am trying to use socket.io with vuejs but i keep getting errors, i couldn't understand where i went wrong. What I want to do is clearly when the form is submitted, it is listened to by the audience and instantly sees the post to the manager. Of course, this is not happening. I am using socket.io wrong. I couldn't understand.

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

server.js

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


// http.listen(3000);

app.get('/', (req, res) => {
    res.send('<h1>Hello world</h1>');
});

io.on('connection', socket => {
    socket.on('new_appointment_create', function () {
        console.log("okey");
        io.emit('admin_appointment_list');
    });
});

server.listen(3000, function () {
    console.log('Listening on Port: 3000');
});

formpost.vue

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



.then((response) => {
                    if (response.status) {
                        socket.emit('new_appointment_create');
                        this.completeForm = false;
                    }
                })

adminlist.vue

import io from 'socket.io-client';
var socket = io('http://localh
created() {

        this.getData();
        socket.on('admin_appointment_list', () => {
            console.log("list okey");
            this.getData();
        });
    },

package.json

"devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "socket.io": "^3.0.3",
        "socket.io-client": "^2.3.1",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "express": "^4.17.1",
        "laravel-vue-pagination": "^2.3.1",
        "v-mask": "^2.2.3",
        "vue-resource": "^1.5.1"
    }

Answer 1

The error you're receiving is due a feature from browsers called preflight that consists in the browser doing kind of "ping request" to the server that you want to access with an HTTP OPTIONS to get the response headers and check for the Access-Control-Allow-Origin header.

The idea is that your API should declare in this header which origins(domains) are allowed to consume your resources/APIs.

The "easiest" way to resolve this is to configure your API to respond with Access-Control-Allow-Origin: * . But it's not the correct way, you shouldn't go to production * as configuration.

In my opinion the correct way to resolve this is use a http proxy while in dev, and in production you configure your Apache or NGINX or whatever http server you'll use to do so.

If you're using @vue/cli , it already has an option to configure a proxy server for development, take a look in the docs .

But fastforwarding the refactoring needed if you use the devProxy option, you will basically map an resource/context in the same server/port which is served you front-end to proxy requests/connections to your websocket.

Then you'll stop calling the http://localhost:3000 directly and will use the mapped resource/context.

For example:

In your vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:300',
        ws: true
      }
    }
  }
}

Then you will create the socket:

var socket = io(`${location.protocol}//${location.host}/api`);

Being honest with you, I've never used the devProxy with websockets, but the docs says it has support for it.