XmlHttpResquest + REST Authorization

Question

I have some RESTful WebServices under Apache Tomcat Server with BASIC Authorization.

I wanna serve this services to javascript clients with ajax calls. I'm trying to access it with the following code:

<!DOCTYPE html>
<html>
  <body>
    <p><input type="button" value="Call API!" onClick="callApi();"/></p>
  </body>
  <script language="text/javascript"></script>
  <script>
    function callApi(){
      try {
        var params = "latitude=-25.42&longitude=-49.27";

        var xhr = new XMLHttpRequest();

        xhr.open("POST"
          , "http://192.168.0.12:8080/project/api/retrieveFullAddress/json"
          , true /*async*/);

        var basicAuth = btoa("email@domain.com:Password123");

        xhr.setRequestHeader("Authorization", "Basic " + basicAuth);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.setRequestHeader("Content-length", params.length);
        xhr.setRequestHeader("Connection", "close");
        //xhr.withCredentials = true;

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
          }
        }

        xhr.send(params);

      } catch (e) {
        alert(e.message);
      }
    }
  </script>
</html>

However, the server is rejecting my POST call, returning "401 Unauthorized". Firebug shows me the following set of server's responses:

request header

OPTIONS /project/api/retrieveFullAddress/json HTTP/1.1
Host: 192.168.0.12:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Origin: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

response header

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Allow: OPTIONS,POST
Last-Modified: Dom, 17 Nov 2013 10:30:35 BRST
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization, authorization
Vary: Accept
Content-Type: application/xml
Content-Length: 998
Date: Sun, 17 Nov 2013 12:56:13 GMT

request header

POST /project/api/retrieveFullAddress/json HTTP/1.1
Host: 192.168.0.12:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Authorization: Basic dGVmZGljYWRvQGVhc3l0ZWYuY29tLmJyOlBhc3N3b3JkMTIz
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Content-Length: 32
Origin: null
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

response header

HTTP/1.1 401 Unauthorized
Server: Apache-Coyote/1.1
WWW-Authenticate: Basic realm="Restrict Area"
Content-Type: text/html;charset=utf-8
Content-Length: 951
Date: Sun, 17 Nov 2013 12:56:13 GMT

If I uncomment the line xhr.withCredentials = true; firebug shows me that only the OPTIONS command is executed, without running the POST command. The service it's really not executed.

What can I do to solve this problem? What is going on?

Thanks in advance.

Does it work when you try it from the same origin? You can open any page press F12, paste the code in the command line in the console tab and run it. I read here that Firefox doesn't allow authentication if it's not the same origin here: http://stackoverflow.com/questions/6695185/access-to-restricted-uri-denied-code-1012 And that XHR supports basic authentication natively https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#open() But a quick test with forcecors on on Firefox gets me "Error: Access to restricted URI denied" without even trying to make the request. — HMR, Nov 17 '13 at 15:17
In 2011 Chrome would not allow basic auth from different origin because of possible fishing attack: http://avalanche123.com/blog/2011/10/10/cross-domain-javascript-lessons-learned/ If you were to inject your script (copy and paste it in the console command prompt) when you fetch a page then inspect the request and response headers you'd know if the restrictions got looser or tighter. In 2011 Firfox allowed cross origin with basic auth but may have decided it's not a good idea. — HMR, Nov 18 '13 at 12:42
This could be a possible solution too http://stackoverflow.com/questions/18499465/cors-and-http-basic-auth — HMR, Nov 18 '13 at 12:44
I "solved" the problem by using GET with JSONP, instead of POST, and setting the username and password in the service URL: http://username:password@server_address. To me, that doesn't look like an elegant solution, but I don't know anything else I can do. — Robson Braga, Nov 19 '13 at 18:34

XmlHttpResquest + REST Authorization

0 Answers0