2
votes

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

1
Search for the error message, No 'Access-Control-Origin' header is present on the requested resource - Jason Goemaat
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

1 Answers

4
votes

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.