I'm having trouble with this code and I can't seem to get it to work. The typical error that I get back for this call is a "Failed to load resource: the server responded with a status of 401 (Unauthorized) " .

$('#btnZendesk').click(function () {
      $.ajax({
          url: ".json",
          type: 'GET',
          crossDomain: true,
          xhrFields: {
              withCredentials: true
          },
          cache: false,
          dataType: 'jsonp',
          processData: false,
          data: 'get=login',
          timeout: 2000,

          username: "[email protected]",
          password: "test",
          success: function (data, textStatus, response) {
              alert("success");
          },
          error: function (data, textStatus, response) {
              alert(data);
          }
      });

I'm having trouble with this code and I can't seem to get it to work. The typical error that I get back for this call is a "Failed to load resource: the server responded with a status of 401 (Unauthorized) " .

$('#btnZendesk').click(function () {
      $.ajax({
          url: "https://flatlandsoftware.zendesk./api/v2/topics/22505987.json",
          type: 'GET',
          crossDomain: true,
          xhrFields: {
              withCredentials: true
          },
          cache: false,
          dataType: 'jsonp',
          processData: false,
          data: 'get=login',
          timeout: 2000,

          username: "[email protected]",
          password: "test",
          success: function (data, textStatus, response) {
              alert("success");
          },
          error: function (data, textStatus, response) {
              alert(data);
          }
      });

• javascript
• jquery
• ajax
• cross-domain

• Same origin policy won't allow you to make cross-domain AJAX requests. – gronostaj Commented Jan 15, 2013 at 15:22
• flatlandsoftware.zendesk./api/v2/topics/22505987.json resource is protected with Basic Authentication – Tom Commented Jan 15, 2013 at 15:22
• 2 Wrong password and username? – JJJ Commented Jan 15, 2013 at 15:23
• 1 I've tried accessing that json file in my browser and it too says the request is unauthorized with those credentials. Please check your credentials. – miguelcobain Commented Jan 15, 2013 at 15:24
• 1 @gronostaj that is incorrect if CORS is implemented. – Kevin B Commented Jan 15, 2013 at 16:02

2 Answers 2

Problem is that the resource you are trying to access is protected with Basic Authentication.

You can use beforeSend in jQuery callback to add a HTTP header with the authentication details e.g.:

beforeSend: function (xhr) {
  xhr.setRequestHeader ("Authorization", "Basic XXXXXX"); 
}

Alternatively you can do it using jQuery ajaxSetup

$.ajaxSetup({
  headers: { 'Authorization': "Basic XXXXX" }
});

EDIT

A few links to the mentioned functions

• jQuery.ajaxSetup
• jQuery.ajax

EDIT 2

The Authorization header is constructed as follows:

• Username and password are joined into a string "username:password" and the result string is encoded using Base64

Example:

Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

I too got this problem and somehow all solutions from internet either failed or were not applicable due to client webservice restrictions (JSONP, XDR, CORS=true)

For this, I added an iframe in my page which resided in the client;s server. So when we post our data to the iframe and the iframe then posts it to the webservice. Hence the cross-domain referencing is eliminated.

We added a 2-way origin check to confirm only authorized page posts data to and from the iframe.

Hope it helps

<iframe style="display:none;" id='receiver' name="receiver" src="https://iframe-address-at-client-server">
 </iframe>

//send data to iframe
var hiddenFrame = document.getElementById('receiver').contentWindow;
hiddenFrame.postMessage(JSON.stringify(message), 'https://client-server-url');

//The iframe receives the data using the code:
window.onload = function () {
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        var origin = e.origin;
        //if origin not in pre-defined list, break and return
        var messageFromParent = JSON.parse(e.data);
        var json = messageFromParent.data;

        //send json to web service using AJAX   
        //return the response back to source
        e.source.postMessage(JSON.stringify(aJAXResponse), e.origin);
    }, false);
}