Socket.io - Origin Not Allowed Access-Control-Allow-Origin

Question

I know that there was some discussion of this topic on SO, but I can not find the answer to my question. I have a web page running on a server with Aptana on localhost: 8020. The javascript on the page hits the node server on which I am running on localhost: 1337. Here is the node code:

var io = require('socket.io'); var http = require('http'); var sys = require('sys'); var json = []; var server = http.createServer(function (req, res) { var headers = {}; headers["Access-Control-Allow-Origin"] = "*"; headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS"; headers["Access-Control-Allow-Credentials"] = true; headers["Access-Control-Max-Age"] = '86400'; // 24 hours headers["Access-Control-Allow-Headers"] = "X-Requested-With, Access-Control-Allow-Origin, X-HTTP-Method-Override, Content-Type, Authorization, Accept"; res.writeHead(200, headers); res.end(); }); server.listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/'); var socket = io.listen(server); socket.on('connection', function(){ console.log("Connected"); }); 

I process the cors request by changing the headers that I do all the time. My client code is usually new to socket.io. Here is the tag from my code:

 <script src="http://cdn.socket.io/stable/socket.io.js"></script> <script> // Create SocketIO instance var socket = new io.Socket('localhost',{ port: 1337 }); socket.connect(); // Add a connect listener socket.on('connect',function() { log('<span style="color:green;">Client has connected to the server!</span>'); }); // Add a connect listener socket.on('message',function(data) { log('Received a message from the server: ' + data); }); // Add a disconnect listener socket.on('disconnect',function() { log('<span style="color:red;">The client has disconnected!</span>'); }); // Sends a message to the server via sockets function sendMessageToServer(message) { socket.send(message); log('<span style="color:#888">Sending "' + message + '" to the server!</span>'); } // Outputs to console and list function log(message) { var li = document.createElement('li'); li.innerHTML = message; document.getElementById('message-list').appendChild(li); } 

When I run the code, I keep getting "XMLHTTPRequest ... Origin is not allowed by Access-Control-Allow-Origin errors." My browser is chrome. 1. Why does my browser use XMLHTTPRequest and not Websocket? 2. Why do I get an access control error when changing headers? Thank you for your help.

Answer 1

Your custom headers never actually get written for socket.io-related queries.

Socket.IO overrides some http server methods. One of them is the launch of request handlers. Socket.IO only allows itself to be the main processor of all requests. Then it checks if the request is really a socket.io request (based on the prefix of the requested path). If it determines that it should not process this request, it starts other request handlers.

You can see this by simply placing the console.log statement before the writeHead call, and you will see that nothing appears in standard mode.

Reading the source code , it seems that socket.io automatically sets the Access-Control-Allow-Origin header with the value of the origin header of the request. I would suggest that there is a way to set such a header on the client as well.

So, to clear things up:

1 Your falsl browser returns to xhr polling because it does not support web ports or port handler migration does not work

2 The headers that you set in the httpServer request event are never sent, so they have no action in the origin policy.

: find a way to set the origin header in the request. After scanning the client code, I did not find evidence that this can be done easily.

Answer 2

Note that the value "*" cannot be used in the Access-Control-Allow-Origin header when the Access-Control-Allow-Credentials value is true. Remove the Access-Control-Allow-Credentials header or set the Access-Control-Allow-Origin to the request Origin header.

Answer 3

According to socket.io documentation, you should be able to set both transport priorities (and possibly skip one of them if it creates problems) and directly configure socket.io source files.

 io.set('transports', ['websocket', 'xhr-polling', 'jsonp-polling', 'htmlfile', 'flashsocket']); io.set('origins', '*:*');