Authentication headers with JQuery and Tomcat

My goal is to have a web-service, using an Apache Tomcat 7, and to communicate with it using ajax request from another domain. The web-service is working, but I'm having troubles with the JavaScript part.

My problem is when I'm trying to do any request with basic auth, the headers are removed when the Tomcat give me the request :

String basicAuth = request.getHeader("Authorization");

The string is always to null. I've tried to look for answers, and I'm guessing the problem come from my web.xml configuration (and because I'm using cross-domain requests).

The javaScript part looks like this:

$.ajax({
    type: 'GET',
    url: 'http://localhost:8080/Test/endpoint/to/test',
    dataType : 'json',
    beforeSend: function (request) {
        request.withCredentials = true;
        request.setRequestHeader("Authorization", "Basic  " + btoa('test' + ":" + 'test'));
    },
    success: function(data) {
        console.log(data);
    },
    error: function(data) {
        console.log(data);
    }
});

And my web.xml file looks like this:

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
    version="2.4">

    <display-name>File Explorer</display-name>
    <description>
        File Explorer
    </description>

    <servlet>
        <servlet-name>Test</servlet-name>
        <servlet-class>fr.vuzi.controller.FrontController</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>FrontController</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
        <init-param>
            <param-name>cors.allowed.origins</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.methods</param-name>
            <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.headers</param-name>
            <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposed.headers</param-name>
            <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
        </init-param>
        <init-param>
            <param-name>cors.support.credentials</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.preflight.maxage</param-name>
            <param-value>10</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

(I'm using only one endpoint for every request). I've tried pretty much anything I could find, and I don't know if the problem is on the client or server side.

I know there is similar questions: Authentication headers are not sending JQuery Ajax but none of the solutions seems to work for me...

Thanks in advance.