jquery basic authentication failing

Question

Consider this header info:

 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
 Accept-Encoding:gzip, deflate, sdch
 Accept-Language:en-US,en;q=0.8
 Authorization:Basic TWluZVN0YXI6TWluZVN0YXI=
 Cache-Control:max-age=0
 Connection:keep-alive
 Host:*

This header info is for the url. I am trying to get the json value from this url. This url, when accessed alone pops up for a username and password.

TRY1:

      $.ajax({
        type:'GET',
      url: 'http://'+domainName+':9898/*/*',
      dataType:"json",
      username: '*',
      password: '*',
      async: false
      }).responseText;

TRY2

      $.ajax({
        type:'GET',
      url: 'http://'+domainName+':9898/jolokia/*/*',
      dataType:"json",
      crossDomain: true,
      beforeSend: function(xhr) { 
          xhr.setRequestHeader("Authorization", "Basic " + btoa('*' + ":" + '*')); 
          },
      async: false
      }).responseText;

TRY3:

Tried adding this in web.xml of tomcat.

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

But still I am not able to access the url, still it gives the following error:

     GET http://***.**.**.**:9898/*/* 401 (Unauthorized)
    jquery.min.js:5 XMLHttpRequest cannot load http://**.**.**.**:9898/*/*. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://localhost:8080 is therefore not allowed access. The response had HTTP status code 401.(index):1 Uncaught SyntaxError: Unexpected token u

I just need to access the url and get the json values from that url. The URL is protected with a username and password , which I know.

I don't now how this can be a cross domain issue. When I remove the authentication from url then this code works fine:

      $.ajax({
        type:'GET',
      url: 'http://'+domainName+':9898/*/*',
      dataType:"json",
      async: false
      }).responseText;

But as soon as I authenticate the url the code fails, After applying above steps too, the code fails.

You've got a cross domain issue. Try your first version with dataType "jsonp" and the additional option xhrFields: { withCredentials: true } Read here for more info on the topic: http://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working — bouscher, Nov 27 '14 at 11:50
@bouscher i tried with jsonp but that even gives error as unexpected exception. — Nagendra Singh, Nov 27 '14 at 12:13
That's probably because the server doesn't reply in json format. Did you try using POST instead of GET and also are you sure Port 9898 is correct? It seems to be used for UDP/TCP and not http protocol. Also try to throw a proper error like this: error : function(httpReq,status,exception){ alert(status+" "+exception); } in order to better debug — bouscher, Nov 27 '14 at 12:30
@bouscher The server reply in json format. I have tried just hitting the url i am getting value in json format after entering the username and password in pop up box. — Nagendra Singh, Nov 27 '14 at 12:46
@bouscher Why is there a cross domain issue? Here is an another example, I have removed the username and password from the url, Now the normar ajax call works. As soon as I authorize the url the code does not work. But, i need the url to be authorized. — Nagendra Singh, Nov 27 '14 at 12:57
@bouscher The jsonp is not required but, the `xhrFields: { withCredentials: true }` did the magic. — Nagendra Singh, Nov 28 '14 at 05:28
Glad I could help, I put it in an answer, so you can accept it, if you like. — bouscher, Nov 28 '14 at 08:55

score 0 · Answer 1 · answered Nov 27 '14 at 11:30

0

try deleting dataType:"json" from ajax method. Maybe the server methods gets json string but not using json content-type

answered Nov 27 '14 at 11:30

Jon Ander

740
1
14
23

The server reply in json format. I have tried just hitting the url i am getting value in json format after entering the username and password in pop up box – Nagendra Singh Nov 27 '14 at 12:47

score 0 · Answer 2 · answered Nov 28 '14 at 05:28

There is no need for jsonp. I got it using this:

    $.ajax({
    xhrFields: { withCredentials: true },
    type:'GET',
     url: 'http://'+domainName+':9898/jolokia/*/*',
     dataType:"json",
     crossDomain: true,
      async: false
      }).responseText;

score 0 · Accepted Answer · answered Nov 28 '14 at 08:54

0

Try setting the additional jquery ajax parameter:

xhrFields: { withCredentials: true }

This will enable the cors functionality.

answered Nov 28 '14 at 08:54

bouscher

1,300
1
9
18

jquery basic authentication failing

3 Answers3