Authentication headers are not sending JQuery Ajax

Question

I have web server hosted in Apache Tomcat 7 with Basic authentication. I have Tomcat user \'tomcat\' with role \'tomcat\' and password \'tomcat\'. Following are my web.xml f

Answer 1

Two things to try:

1) Add the CORS Filter to your Tomcat configuration

add the CORS Filter to your Tomcat configuration. Note Access-Control-Allow-Origins has been purposely left blank below, so no site has access via CORS. But the important parameter that is configured is Access-Control-Allow-Credentials.

<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>

2) Modify Your Ajax Call

Modify your beforeSend in your ajax call like so:

$.ajax({
    type: "GET",
    beforeSend: function (request)
    {
        request.withCredentials = true;
        request.setRequestHeader("Authorization", "Basic  dG9tY2F0OnRvbWNhdA==");
    },
    url: "http://localhost:1222/testservice/rest/test/users",
    dataType:"jsonp",
    success: function(res) {
        alert(res); 
    },
    error: function(err) {
        alert(err);
    }
});           

Only other thing I noticed is that your web.xml might also need the following:

<security-role>
  <role-name>tomcat</role-name>
</security-role>

Hope this helps.

Answer 2

mccannf got us 99% of the way there with a similar issue hover we switched up how we set the withCredentials property and this worked for us. notice we set the xhrFields property. This can been seen within the jQuery documentation for the ajax method here; http://api.jquery.com/jQuery.ajax/

$.ajax({
    type: "GET",
    xhrFields: { withCredentials: true }, 
    beforeSend: function (request)
    {
        request.setRequestHeader("Authorization", "Basic  dG9tY2F0OnRvbWNhdA==");
    },
    url: "http://localhost:1222/testservice/rest/test/users",
    dataType:"jsonp",
    succes: function(res) {
        alert(ers); 
    },
    error: function(err) {
        alert(err);
    }
});

However, we were not using jsonp, simple json.

Answer 3

I haven't found a solution for this, only a workaround:

Send the Authorization header using two headers, the standard one and a custom one for IE:

beforeSend: function (jqXHR, settings) {
    if (self._hasAuthInfo()) {
        jqXHR.setRequestHeader("Authorization", self._makeAuthHeader());
        jqXHR.setRequestHeader("IEAuth", self._makeAuthHeader());
    }
}

The server side will check both (the second one only if IE and if the standard one is not present)

Answer 4

Found that passing authentication via headers is not working with jQuery ajax with jsonp data type. So tried following and works fine.

$.ajax({
    type: "GET",
    url: "http://tomcat:tomcat@localhost:1222/testservice/rest/test/users",
    dataType:"jsonp",
    success: function(res) {
        alert(res); 
    },
    error: function(err) {
        alert(err);
    }
});  

function callbackMethod(data) {
    alert(data);
}