2

I am building a webapp using AngularJS on top of a MarkLogic 7 XML database. I am using the REST API provided by MarkLogic to access the database. The code I'm using in my controller is as follows.

app.controller("mainController", function($scope, $http){
    var addr = 'http://localhost:8011/v1/search?q=test&options=newtest';
    $http({method:'GET', url: addr})
    .success(function(data){
    alert('Success');
        console.log(data);
});
});

Now, when I open my view, a 'bad request' error is logged in the console.

OPTIONS http://localhost:8011/v1/search?q=test&options=newtest 400 (Bad Request)
angular.min.js:99
OPTIONS http://localhost:8011/v1/search?q=test&options=newtest No 'Access-Control-Allow-  
Origin' header is present on the requested resource. Origin 'null' is therefore not 
allowed access. angular.min.js:99
XMLHttpRequest cannot load http://localhost:8011/v1/search?q=test&options=newtest. No  
'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null'   
is therefore not allowed access. index.html:1

Are there any settings to be configured on the MarkLogic server to make the API accessible? Please help.

Thanks, Krishna

Krishna Chaitanya
  • 397
  • 4
  • 14
  • Search for the error message, `No 'Access-Control-Origin' header is present on the requested resource` – Jason Goemaat Mar 26 '14 at 09:06
  • possible duplicate of [No 'Access-Control-Allow-Origin' header is present on the requested resource.' Why is it not showing when I use POSTMAN?](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource-w) – Jason Goemaat Mar 26 '14 at 09:06
  • Hello Jason, I've tried using jsonp as suggested for that question. However, I cannot use the callback parameter in the request as MarkLogic does not understand it. Also, when I try using the $http.jsonp(url).success(data) method, it gives me an unexpected ':' error. I tried to fix this by escaping the ':' before the port number, but then I get a 'Connection Refused' error. So that solution does not work for me. – Krishna Chaitanya Mar 26 '14 at 09:25

1 Answers1

4

Krishna, is your AngularJS code hosted by MarkLogic, or are you running it in node.js (via grunt, perhaps)? This looks like a cross-site scripting problem. Two solutions come to mind:

  1. If you don't need a middle tier, MarkLogic can host the Angular code. Put it in the modules database of the app server on port 8011. Then the request is going to the same place the JS came from and the problem goes away.
  2. If you want to keep a node layer, set up a proxy. Assuming you're using Grunt, you can see how I handled that in the Gruntfile.js of an app with the same stack.

Once you get past that error, you might consider moving the interaction with the MarkLogic REST API into a service. The Demo Cat application I linked to above has an early version of an MLRest AngularJS service; that might be a useful starting point.

Dave Cassel
  • 8,352
  • 20
  • 38
  • Dave, thank you for your response. I'd hosted the HTML pages on a Tomcat server running on port 8080. I've now loaded all the files into the modules database, but how do I now access the HTML page? – Krishna Chaitanya Mar 26 '14 at 12:41
  • 1
    HTML can be hosted right next to the JS files in the modules DB ... MarkLogic will serve up static content just fine. – DALDEI Mar 26 '14 at 13:42
  • As an example, suppose you have a MarkLogic HTTP app server on port 8010, and you have my-page.html in your modules database at /my-page.html (at the root). Then you can point your browser to http://localhost:8010/my-page.html. Also note that you can set up a rewriter to map URLs to html pages or XQuery main modules. – Dave Cassel Mar 27 '14 at 13:33