解決nodejs socket.io is not allowed by Access-Control-Allow-Origin 跨域問題

解決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});
    //var socket = new io.Socket(null,{port:8082,rememberTransport:true,timeout:1500});
    
    /*
        if (/Firefox\/\s/.test(navigator.userAgent)){
        var socket = io.connect(url,{transports:['xhr-polling']}); 
    } 
    else if (/MSIE (\d+.\d+);/.test(navigator.userAgent)){
        var socket = io.connect(url,{transports:['jsonp-polling']}); 
    } 
    else { 
        var socket = io.connect(url,{transports:['websocket']}); 
    }
    */

    //socket.connect();
    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 接收不了數據。。。。有人知道是什么原因，麻煩你告訴我。。好了謝謝...