Why socket.io is messing up my ajax headers?

Question

I am using custom headers in ajax requests:

$.ajaxSetup({
                beforeSend: function (xhr)
                {
                    xhr.setRequestHeader("Authorization",  'Bearer ' + token);
                    xhr.setRequestHeader("Accept",  'application/json');
                }
            });

It was working great until I added socket.io chat to my app. When I include socket.io.js file served by my socket.io server my headers are gone :(

Sure I can put my headers in every ajax request but it's not convenient. My original approach is cleaner.

Anyone can help me with this? Why my headers are gone? Is there a way to make them work again while using socket.io?

UPDATE

When I get rid of socket.io.js script include:

<script src="http://localhost:6001/socket.io/socket.io.js"></script>

It's all working fine. And no, there are no errors because I do it this way:

if(typeof io !== 'undefined') {
    self.echo = window.Echo = new Echo({
        broadcaster: 'socket.io',
        host: CONFIG.socket_url + ":" + CONFIG.socket_port,
        auth: {
               headers: {
                        Authorization: 'Bearer ' + auth.getToken(),
                        Accept:  'application/json'
               },
        },
     });
 }

UPDATE2

Well the problem might be not the socket.io, but laravel-echo (which uses socket.io for broadcasting).

Answer 1

What if you comment out that Echo code?

Look, all I can do is comment on code I can see. I stand by my assertion that there's nothing in socket.io that messes with jQuery Ajax calls.

So, the problem is probably caused by code you are running when socket.io is active, not by socket.io itself.