jQuery AJAX Cross Domain with BASIC Authentication
ajax, cross-domain, javascript, jquery
Solution
You will need to make proxy for cross-domain ajax requests.
Usual scenario looks like this:
- Client send ajax request to server
- Your server forwards request to external/remote server
- Waiting on response from remote server
- Parse and process response from remote server
- Send response back to client
If you are using php you can send requests with curl, and it is pretty easy to implement. I have wrote article on this topic recently http://www.svlada.com/proxy-ajax-requests-curl-and-symfony-2/.
Problem
I'm attempting to make use of the Beanstalk (beanstalkapp.com) API by pulling data into a webpage so people can view it without accessing my SVN. What I'm doing to try and access it is by using an AJAX request through jQuery. The code is below, but I get an error each time, and can't return the data. ``` <script type="text/javascript"> $(document).ready(function() { var tok = 'username' + ':' + 'password123'; hash = btoa(tok); authInfo = "Basic " + hash; $.ajax({ url: "http://username.beanstalkapp.com/api/changesets.json", beforeSend: function (xhr) { xhr.setRequestHeader ("Authorization", authInfo); }, type: "GET", async: false, crossDomain: true, dataType: "json", success: function(html){ console.log(html); }, error: function(html){ console.log('error'); } }); }); </script> ``` If I access the URL straight through my browser (http://username.beanstalkapp.com/api/changesets.json) it works just fine and returns the json. However, I cannot get the AJAX to return it. Any help is appreciated. Thanks!