解决nodejs socket.io is not allowed by Access-Control-Allow-Origin 跨域问题

blog:http://www.cnblogs.com/solq/
demo:http://unitysgui.sinaapp.com/websocket/socketio.html

更改 :\node_modules\socket.io\lib\manager.js

if (origin) {
    // https://developer.mozilla.org/En/HTTP_Access_Control
    headers['Access-Control-Allow-Origin'] = origin;
    headers['Access-Control-Allow-Credentials'] = 'true';
    //headers['Access-Control-Allow-Headers'] = 'Referer';
  }
    headers['Access-Control-Allow-Origin'] = "*";

在后面添加 headers[‘Access-Control-Allow-Origin’] = “*”;

server.js

var http = require('http'),  
io = require('socket.io'),
sys = require('sys');
server = http.createServer(function(req, res){
res.writeHead(200, {‘Content-Type’: ‘text/html’});
res.end(“hello”);
});
server.listen(8082);

var socket = io.listen(server,{origins: ‘:’});

/*
socket.set(“origins”,"");
socket.set(‘transports’, [
‘websocket’
, ‘flashsocket’
, ‘htmlfile’
, ‘xhr-polling’
, ‘jsonp-polling’
]);/

socket.on(‘connection’, function(client){

sys.puts("New client is here!");
client.send("hello world");

client.on('message', function(msg){ sys.puts("client has sent:"+msg); }) ;
client.on('disconnect', function(){ sys.puts("Client has disconnected"); }) ;

//发送自定义事件
client.emit('news', { hello: 'news world' });

//临听自定义事件
client.on('my other event', function (data) {
    //console.log(data);
});
});

client.js

<script src="http://localhost:8082/socket.io/socket.io.js"></script>
<script>
window.onload=function(){
    
    var url='127.0.0.1:8082';
    var socket = io.connect('localhost',{port:8082,rememberTransport:true,timeout:1500});
 
    socket.on('connect', function(){ 
        console.log('connected to server++++++++++++++++'); 
        socket.send('Hi Server...'); 
    }) ;
    socket.on('message', function(r){ console.log('msg:+++++++++++'+r); }) ;
    socket.on('disconnect', function(){ console.log('disconnected from server'); }) ;

    socket.on('news', function (data) {
        console.log("++++++++++++++++++++++++++");
        console.log(data);
        
        //发送自定义事件
        socket.emit('my other event', { my: 'data' });
    });
    
    /*XMLHttpRequest cannot load http://localhost:8082/socket.io/1/?t=1336306289263. Origin null is not allowed by Access-Control-Allow-Origin.
    var ws = new WebSocket("ws://127.0.0.1:8082");
    ws.onopen = function(){console.log('connected to server');}
    ws.onmessage = function(m){console.log('onmessage');}
    ws.onclose = function(){}*/
}
</script>

https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO

注意：经过测试 io.connect(‘localhost’) localhost:8082 加上端会连不上

 if (origin!='null') {
    // https://developer.mozilla.org/En/HTTP_Access_Control
    headers['Access-Control-Allow-Origin'] = origin;
    headers['Access-Control-Allow-Credentials'] = 'true';
    //headers['Access-Control-Allow-Headers'] = 'Referer';
  }
    console.log("console.log(origin)+++++++++++++++++++++++++++++++++++++++")
    console.log(origin)
    console.log(req.headers)

origin==null…难怪连不上。。。为什么为是null不太懂原理。。。就不管了，，手动改为全部可以访问就行了

解决IE不能接收服务端信息问题： sever 要打开这几个协议吧。。。。 然后 clinet html 要放在服务里面，因为IE用的是 jsonp 方式 的话。。。。。。。。。。。只要是 js 请求都要放在服务器… 但是放在服务器里， node server 接收 ie 客户端 连接类型为 flashsocket 方式,反正是不太了解。。。能工作就行了。。哈哈

socket.set('transports', [
    'websocket'
    , 'flashsocket'
    , 'htmlfile'
    , 'xhr-polling'
    , 'jsonp-polling'
]);

最后，经过反复测试，，以上打开的协议是 遍历检测有就使用的。。。。 如果把 flashsocket 放在最后，那么 server 跟 ie 就用 jsonp 方式来连接…但是 ie 接收不了数据。。。。有人知道是什么原因，麻烦你告诉我。。好了谢谢…

希望能给个邀请码。。。。。

我加了 {origins: ‘:’} 还是不行，所有就去掉了

要解决 socket.io 的跨域问题（即 Access-Control-Allow-Origin 错误），你需要在服务器端配置响应头，允许来自不同源的请求。下面是基于你的描述，如何修改 Node.js 服务器端代码以支持跨域请求的步骤：

修改服务器端代码

在你的 server.js 文件中，你需要设置响应头以允许来自任何来源的请求：

var http = require('http');
var io = require('socket.io');
var path = require('path');

var server = http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end("hello");
});

server.listen(8082);

var socket = io.listen(server);

// 设置允许跨域访问
socket.attach(server, {
    origins: '*:*',
    allowRequest: function (auth, callback) {
        const headers = auth.req.headers;
        const origin = headers.origin || headers.referer;
        return callback(null, !origin || origin.includes('your-allowed-domain'));
    }
});

socket.on('connection', function(client) {
    console.log("New client is here!");

    client.send("hello world");

    client.on('message', function(msg) {
        console.log("client has sent:" + msg);
    });

    client.on('disconnect', function() {
        console.log("Client has disconnected");
    });

    // 发送自定义事件
    client.emit('news', { hello: 'news world' });

    // 监听自定义事件
    client.on('my other event', function (data) {
        console.log(data);
    });
});

解释

1. 设置跨域响应头：通过 socket.attach() 方法中的 allowRequest 回调函数，你可以检查请求的来源并决定是否允许该请求。这里我们简单地允许所有来源，但你可以根据需要限制到特定域名。

2. 简化处理：你可以直接在 socket.attach 中设置 origins: '*' 来允许所有来源，如果你不需要复杂的验证逻辑。

3. 客户端连接：客户端的 client.js 文件无需更改，因为它已经是正确的连接方式。

这样设置后，你的服务器将正确处理来自不同源的 socket.io 连接请求，并解决跨域问题。