CODEWITHSUNDEEP
javascriptjqueryajaxcross-domain
Michael Arnold
Michael Arnold

Reputation: 21

Cross domain jQuery ajax calls not working

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.com/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);
          }
      });

Upvotes: 2

Views: 5547

Answers (2)

Riju Mahna
Riju Mahna

Reputation: 6926

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);
}

Upvotes: 0

Tom
Tom

Reputation: 26839

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

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

Upvotes: 6

Related Questions