Question

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

XMLHttpRequest无法加载http://foo.bar:12354/。请求中不存在“Access-Control-Allow-Origin”标头资源。因此，不允许原点“http://foo.bar”访问。

下面是我调用页面的非常简单的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（）方法来获取您的页面 - 您的内容就像index.html中的HTML / JS / CSS一样file（它还将建立与刚刚服务它的服务器的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加载

1 个答案: