Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true

Question

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true

I am trying to get nowelium / socket.io-titanium to work i have it working on the device but on website i get the following error in my console

XMLHttpRequest cannot load http://127.0.0.1:8080/socket.io/1/?t=1345807417891. Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

I am using socket.io here is the chat.js server

var io = require('socket.io').listen(8080);

var archiveMessages = {};
var channels = ['foo channel', 'bar channel'];

var chat = io.of('/chat');
chat.on('connection', function(socket){
  console.log('connected: %s', socket.id);

  // push available channel list
  socket.emit('available_channel', channels);

  socket.on('join', function(value){
    console.log('%s joined channel: %s', socket.id, value.channelId);

    socket.join(value.channelId);
    socket.set('channel_id', value.channelId, function(){
      var messages = archiveMessages[value.channelId] || [];
      socket.emit('joined', messages);
      socket.broadcast.to(value.channelId).emit('user:join', {
        id: socket.id
      });
    });
  });

  socket.on('post', function(message){
    socket.get('channel_id', function(err, channelId){
      console.log('%s says<%s channel>: %s', socket.id, channelId, message);

      if(!(channelId in archiveMessages)){
        archiveMessages[channelId] = [];
      }
      archiveMessages[channelId].push(message);

      socket.emit('posted', {
        message: message
      });
      socket.broadcast.to(channelId).emit('user:message', {
        id: socket.id,
        message: message
      });
    });
  });

  socket.on('disconnect', function(){
    console.log('%s disconnected', socket.id);
    socket.get('channel_id', function(channelId){
      socket.leave(channelId);
      socket.broadcast.to(channelId).emit('user:leave', {
        id: socket.id
      });
    });
  });
});

var image = io.of('/image');
image.on('connection', function(socket){

  socket.on('upload', function(param){
    console.log('upload base64 size: %d', param.base64.length);

    if(param.download){
      socket.emit('download', {
        base64: 's' + new Array(65534).join('0') + 'e'
      });
    }
  });
});

and here is the index.html i am running

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>chat sample</title>
    <style>
    #rooms button {
      display: block;
    }
    </style>
    <script type="text/javascript" src="http://localhost:8080/socket.io/dist/socket.io.js"></script>
    <script type="text/javascript">
    var $ = function(id){
      return document.getElementById(id);
    };
    window.addEventListener('load', function (){
      var socket = io.connect('127.0.0.1:8080');

      var chat = socket.of('/chat');

      console.log(chat);

      chat.on('available_channel', function(channels){
        channels.forEach(function (channelId){

          var button = document.createElement('button');
          button.appendChild(document.createTextNode(channelId));

          $('rooms').appendChild(button);
          button.addEventListener('click', function(){
            $('chat').style.display = '';
            chat.emit('join', {
              channelId: channelId
            });
          });
        });
      });

      var addMessage = function(message){
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(message));
        $('messages').appendChild(li);
      };
      chat.on('joined', function(messages){
        messages.forEach(function(message){
          var li = document.createElement('li');
          li.appendChild(document.createTextNode(message));
          $('archives').appendChild(li);
        });
      });
      chat.on('posted', function(value){
        return addMessage('you posted: ' + value.message);
      });
      chat.on('user:join', function(value){
        return addMessage(value.id + ' joined this channel');
      });
      chat.on('user:leave', function(value){
        return addMessage(value.id + ' leaved this channel');
      });
      chat.on('user:message', function(value){
        return addMessage(value.id + ' says ' + value.message);
      });

      $('submit').addEventListener('click', function (){
        var messageValue = $('message').value;
        if(/^\s+$/.test(messageValue)){
          return;
        }

        chat.emit('post', messageValue);
        $('message').value = '';
      });
    });
    </script>
  </head>
  <body>
    <div id="rooms">
    </div>
    <div id="chat" style="display:none">
      <input type="text" id="message" value="" placeholder="message here" />
      <input type="submit" id="submit" value="send" />
      <p>archives</p>
      <ul id="archives" style="color: #999"></ul>
      <p>messages</p>
      <ul id="messages"></ul>
    </div>
  </body>
</html>

CAn anyone tell me why this might be happening???

http
node.js
socket.io

Answer 1

I wonder if switching it to localhost would fix that.

I researched into Access-Control-Allow-Origin and traced it to the web browser as the culprit if I remember correctly. I eventually started looking for a way to disable the browser from checking for that. In Chrome this is my shortcut path.

...Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security

See if that works. I don't know if it really remedies the issue as much as it just suppresses the problem. If you were calling the web page from the host you were trying to access I don't think you'd have this problem at all. For example, when I attempt to access my web service on mydomain.com using the web page mydomain.com/myprogram.html it doesn't complain about cross domain access.