socket.io cors 错误。 我尝试在 laravel vuejs 中连接 socket.io 但出现 cors 错误

Question

从源“http://dolphin.test”访问“http://dolphin.test:3001/socket.io/?EIO=4&transport=polling&t=Ni7Nzha”的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问- Control-Allow-Origin' 标头存在于请求的资源上。

我尝试在 vuejs 中连接 socket.io 但代码给了我 cors 错误

服务器端代码：->

const express = require('express');
const app = express();
var https = require('https');
var http = require('http');
const axios = require('axios'); 
const fs = require('fs');
var cors = require('cors');
app.use(cors());

const options = {};
const server = http.Server(app);

const io = require('socket.io')(server);
server.listen(3001,function(){
    console.log('server running on port 3001');
});

var clients = {};
var connected_users = [];


io.on('connection', function(socket) {
 console.log("connection establish");
  socket.send('Hello!');
  socket.on('add-user', function(data) {
    clients[data.userId] = {
     "socket": socket.id,
   };
  connected_users.push(data.userId);
  io.sockets.emit('connected-users', { users_connected: connected_users });
});

socket.on('chat-message', function(data){
  if (clients[data.user_id]) {
    io.sockets.connected[clients[data.user_id].socket].emit("chat-message", data);
    // console.log(data);
  } else {
    console.log("User does not exist: ");         
  }
});

//Removing the socket on disconnect
socket.on('disconnect', function() {
 for(var name in clients) {
  if(clients[name].socket === socket.id) {
    delete clients[name];
    break;
  }
 }  
})
});

客户端代码：->

import io  from 'socket.io-client';
export default {
    data() {
        return {
            isActive : '',
            activeId : '' ,
            isImageLoaded : false,
            user : {},
            src : '',
            siteSettings : {},
            form: new Form(),
            socket : io("http://dolphin.test:3001"),  
        }
    },
    async created() {
        this.showData();
        
        this.socket.on('connection', (socket) => {
            console.log('Admin user connected');
            // socket.on('disconnect', () => {
            //     console.log('user disconnected');
            // });
        });
         this.socket.on('add-user', function (data) {
             console.log(data);
        });
    },

我在laravel中添加了中间件但同样的错误

 return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, 
 OPTIONS');

而且我是在本地服务器上而不是在实时服务器上执行此操作，并且我在系统上创建虚拟主机并尝试在 dolphine.test 上工作是本地服务器

Answer 1

这是我使用 SSL 的工作示例套接字（Vue/Laravel - Node js）

如果您想在 Socket 中使用 https，您必须在此处生成自签名证书，这是链接： 如何创建自签名 SSL 证书

后端节点

const express = require("express");
const fs = require("fs");
const https = require("https");
const cors = require("cors");
const pino = require("pino");
const helmet = require("helmet");
const socketIO = require("socket.io");
const logger = pino({
  prettyPrint: {
   ignore: "pid, hostname",
  },
});


const app = express();
app.use(helmet());
app.use(cors());

//In this case my ssl keys located outside root folder so the path is ../myssl.key
const server = https.createServer(
  {
    key: fs.readFileSync("../ssl.key"),
    ca: fs.readFileSync("../ssl.ca"),
    cert: fs.readFileSync("../ssl.cert"),
    requestCert: false,
    rejectUnauthorized: false,
    secure: true,
  },
  app
);

server.listen(5000, () => {
  logger.info(`[server]: Started on port 5000`);
});


//Here you slove  Cors problem!
const io = socketIO(server, {
  cors: {
    origins: "*:*",
    method: ["GET", "POST", "PUT", "PATCH"],
  },
  transports: ["websocket", "polling", "flashsocket"],
  reconnection: false,
  handlePreflightRequest: (req, res) => {
    res.writeHead(200, {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET,POST",
      "Access-Control-Allow-Headers": "my-custom-header",
      "Access-Control-Allow-Credentials": true,
    });
    res.end();
  },
});

io.on("connection", async (socket) => {
  logger.info("[socket]: New connection...");
  socket.emit("userConnected");
  socket.on("disconnect", async () => {
    console.log("Session closed..");
  });
});

前端 Vue/Laravel

资源/js/plugins/socket.io

import Vue from "vue"
import VueSocketIO from "vue-socket.io"
import SocketIO from "socket.io-client"

Vue.use(new VueSocketIO({
   debug: false,
   connection: SocketIO("https://yourewebsite.com:5000", {
   autoConnect:false
},
  secure:true 

});

希望这对你有用