'Access-Control-Allow-Origin' error even after following 2 approaches

Question

I am trying to build an angular app to access data from MarkLogic database. I am using MarkLogic rest API to access the data. When I try to run the app, I get the following error.

XMLHttpRequest cannot load http://192.168.192.75:9550/v1/keyvalue?element=fieldId&value=1005&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

I have read lot of answers related to this issue on stackoverflow but couldn't get anything working. Here is what I've tried till now.

1) Setting the response header using xdmp in qconsole
xdmp:add-response-header("Access-Control-Allow-Origin", "*");
xdmp:add-response-header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
xdmp:add-response-header("Access-Control-Allow-Headers", "x-requested-with, X-Auth-Token, Content-Type");
2) Tried to add headers by using REST [Extention][1]. Here is the example.sjs file which I wrote.
a) function get(context, params) {
  var results = [];
  context.outputTypes = [];
  for (var pname in params) {
    if (params.hasOwnProperty(pname)) {
      results.push({name: pname, value: params[pname]});
      context.outputTypes.push('application/json');
    }
  }
  context.outputStatus = [201, 'Created My New Resource'];
    context.outputHeaders = 
    {'Access-Control-Allow-Origin' : '*', 'Access-Control-Allow-Methods' : 'GET, OPTIONS, DELETE', 'Access-Control-Allow-Headers' : 'x-requested-with, X-Auth-Token, Content-Type'};
  return xdmp.arrayValues(results);
};
exports.GET = get;
b) curl --anyauth --user admin:admin -X PUT -i -H "Content-type: application/vnd.marklogic-javascript" --data-binary @./example.sjs http://192.168.192.75:9550/LATEST/config/resources/example

It doesn't seem to work, either ways. Can anyone please tell me if I am doing anything wrong? or If there are any other ways to get this working? Thanks in advance.

Answer 1

One alternative way I found is to define my own transform. This helps only for GET request method not for others. Here is what I created.

function customCors(context, params, content)
{
    xdmp.addResponseHeader('Access-Control-Allow-Origin' , '*');
    xdmp.addResponseHeader('Access-Control-Allow-Methods' , 'GET, PUT, POST, HEAD, OPTIONS, DELETE' );
    xdmp.addResponseHeader('Access-Control-Allow-Headers' , 'X-Requested-With, X-Auth-Token, Content-Type, Accept');
    return content;
};

exports.transform = customCors;

to use this we have to use a property called transform. Like this.

http://192.168.192.75:9550/v1/keyvalue?element=fieldId&value=1005&transform=customCors&format=json

Update: Reached out to MarkLogic, they said this can't be done in a 2-tier approach. We have to have a middle layer(3-tier) like java to add Origins/Methods etc.