socket.io 和 jquery 加载

Question

我正在尝试调用通过 socket.io 提供的网页，但出现以下错误：

XMLHttpRequest cannot load http://foo.bar:12354/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://foo.bar' is therefore not allowed access.

下面是我调用页面的非常简单的jq代码：

$( document ).ready(function() {
    $('#x').load('http://foo.bar:12354');
});

这是我的简单 socket.io 示例：

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(12354);
io.on('connection', function (socket) {
        socket.emit('news', { hello: 'world' });
        socket.on('my other event', function (data) {
                console.log(data);
        });
});
app.get('/', function (req, res) {
        res.sendFile(__dirname + '/index.html');
});                                     
app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "http://foo.bar:12354");
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header("Access-Control-Allow-Headers", "Content-Type");
        res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
        next();
});

当我直接使用 http://foo.bar:12354 拉起页面时，页面加载正常。

一个论坛建议我需要包括 apache CORS 批准，但将其放入点访问没有帮助：

Header set Access-Control-Allow-Origin "*"

这看起来应该是一个非常简单的任务，但它让我感到难过。如有任何建议，我们将不胜感激。

Answer 1

在这个例子中，express 为您提供静态内容，因此您不需要 jQuery 的 load() 方法来获取您的页面 - 您的内容只是 HTML/JS/CSS 在 index.html 文件（该文件还将建立到刚刚提供服务的服务器的 websocket 连接）。

从 the docs 看来，express 和 socket.io 可以使用相同的端口（不需要跨源的东西）。因此，我建议切换到端口 80 并按照操作方法部分中的示例进行操作，但不要使用 jQuery load() 部分：

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

app.listen(80);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

index.html

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

然后您应该能够从您的浏览器中点击 http://foo.bar（端口 80）并在您的浏览器和服务器上看到 console.log。我认为您不需要任何东西来处理跨源请求，因为套接字连接到提供静态内容的同一端口。

socket.io 和 jquery 加载

socket.io and jquery load

jquery

socket.io