SockJS doesn't set Bearer authorization token when making handshake

I have a spring boot + angularjs application, i configured it to have a socket connection. this is my socket controller in angularjs:

function SocketController($timeout, localStorageService) {
        var vm = this;
        var accessToken = localStorageService.get('accessToken');
        var stompClient;

        // i can see valid value of token in console
        console.log(accessToken)

        if (accessToken) {
            var socket = new SockJS('/looping',
                null,
                {
                    transports: ['xhr-streaming'],
                    headers: {'Authorization': 'Bearer ' + accessToken}
                });
            stompClient = Stomp.over(socket);
            stompClient.connect({"X-Authorization": "Bearer " + accessToken}, function (frame) {
                console.log('Connected: ' + frame);

                stompClient.subscribe('/topic/loops', function (message) {
                    console.log(message);
                });
            });
        } else {
            console.log("token expired");
        }

        function sendEvent(loopId, value) {
            if (stompClient != null) {
                stompClient.send("/topic/loops", {}, JSON.stringify({'loopId': new Date(), 'value': 'hey silver'}));
            }
        }

        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect();
                stompClient = null;
            }

            console.log("Disconnected");
        }

    }

now, the problem is that when i check request headers in firefox devtools, authorization header doesn't set as you can see below:

How can i solve this problem? I'm new to socket.

UPDATE

When i edited the request using firefox devtools and set Authorization header in request headers, received response with 200 status code but the response content in html of index.html !