Socket.io 跨域问题

Posted 2023-03-15

【中文标题】Socket.io 跨域问题

【英文标题】：Socket.io cross domain issue

【发布时间】：2017-08-15 11:58:26

【问题描述】：

我有一个在 apache 服务器中工作的前端 angularJS 应用程序（客户端），它的 API 调用被发送到在 NodeJS 中运行的后端应用程序（服务器）。现在我想在客户端和服务器之间建立一个套接字连接。 我正在使用 cors npm 模块解决跨域问题，但它不起作用。

我已经看到了几个解决方案，但没有一个对我有用。

这是我的服务器端代码：

var cors = require('cors')
var app = express();
var http = require('http');

app.use(cors(
origin: true,
credentials: true
));


var server = http.createServer(app);
var io = require('socket.io')(server);
io.on('connection', function(socket) 

console.log(":::::::::::::::::::::SOCKET:::::::::::::::::::::")

socket.on('message', function(data) 
    console.log(data); )
);

服务器在http://localhost:8000/工作

这是我的客户端代码：

function socket() 
        var socket = io.connect('http://localhost:8000/');
  return 
     on: function(eventName, callback) 
        socket.on(eventName, callback);
     ,
     emit: function(eventName, data) 
        socket.emit(eventName, data);
     ,
     getSocket: function() 
        return socket;
     ,
     removeAllListeners: function() 
        socket.removeAllListeners();
     
  ;
  

我在 angularJS 中创建了上述工厂，并在如下所示的函数中调用它：

var socket=PermitFactory.socket();
socket.emit('message', 'ssss');

我在浏览器控制台中得到的错误是：

socket-io.js:4948 GET http://localhost:8000/socket.io/?EIO=3&transport=polling&t=LhvWuIr 404（未找到）

在服务器控制台中：

GET /socket.io/?EIO=3&transport=polling&t=LhvUygM 404 18.881 ms - 1153

请帮忙！！！

【问题讨论】：

您的错误是否在控制台中说明了有关 CORS 的任何内容？？

没有。后端控制台中的唯一错误是 ==>GET /socket.io/?EIO=3&transport=polling&t=LhvhEJB 404 3.971 ms - 1153

【参考方案1】：

您收到 404 (Not Found) 这意味着问题出在您的 url 而不是 cors 上。

http://localhost:8000/ 服务器启动了吗？套接字服务器..如果是这样，那么wss 和ws 在wss://localhost:8000/ 或wss://localhost:8000/ 之前

【讨论】：

是的，服务器已启动。我尝试用 wss 替换 http .. 但不工作

你得到 404 这意味着 url 不可用 .. 套接字服务器未启用或什么

【参考方案2】：

在你的服务器端脚本上允许跨域，把它放在 app.js 上

//Access-Control-Allow-Origin
app.use(function(req,res,next)
    res.header('Access-Control-Allow-Origin', '*');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    res.header("Access-Control-Allow-Credentials",true);
    res.header("Access-Control-Allow-Methods","POST,GET,OPTIONS");
    next();
);

app.use(cors());

谷歌浏览器插件允许跨源

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

【讨论】：

谢谢。但是现在问题变成了这个==> XMLHttpRequest 无法加载localhost:8000/socket.io/…。当凭证标志为真时，不能在“Access-Control-Allow-Origin”标头中使用通配符“*”。因此，Origin 'localhost' 不允许访问。 XMLHttpRequest 的凭据模式由 withCredentials 属性控制。