How to use OrientDB HTTP API in Angular application?

Question

I am trying to query OrientDB from an Angular service method. But getting authentication related error. As per my current understanding, I need two GET requests to query OrientDB successfully.

1. Authentication call. i.e. Request to http://localhost:2480/connect/<dbname> with Authentication header
2. Actual Query. i.e. Request to http://localhost:2480/query/<dbname>/sql/<query_text>

But I am getting these errors in browser console:

1. XMLHttpRequest cannot load http://localhost:2480/connect/atudb. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
2. GET http://localhost:2480/query/atudb/sql/select%20@rid%20as%20rid,%20runOfDay%20from%20TestResult%20where%20executorPlatformData.machineName='niteshk' 401 (Unauthorized)
3. XMLHttpRequest cannot load http://localhost:2480/query/atudb/sql/select%20@rid%20as%20rid,%20runOfDay%20from%20TestResult%20where%20executorPlatformData.machineName='niteshk'. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 401.

Below is the code for Angular service

angular.module('ReportApp')
    .factory('orientdbService', ['$http', '$log', '$q', 
        function($http, $log, $q) {
            'use strict';

            var fac = {};

            fac.config = appConfig;

            fac.query = function(sql, callback) {
                $log.log('Query: '+ sql);

                var url=encodeURI(this.config.orientBaseUrl+"query/"+this.config.dbName+"/sql/"+sql);
                $log.log('Request URI: '+ url);

                connectOrientDb()
                .then($http.get(url)
                    .then(function(response){ //Success
                            callback(response.data);
                        },
                        function(response){ //Failure
                            callback({
                                responseStatus: response.status,
                                responseData: response.data 
                            });
                        }));
            }

            fac.fetchCurrentDayReportIdList = function(hostMachineName){
                if(typeof(hostMachineName)  === "undefined"){
                    throw { 
                        name:        "Parameter Missing", 
                        level:       "Show Stopper", 
                        message:     "Error detected. This function prameter 'hostMachineName' is mandatory to evaluate return value.", 
                        htmlMessage: "Error detected. This function prameter '<code>hostMachineName</code>' is mandatory to evaluate return value.",
                        toString:    function(){return this.name + ": " + this.message;} 
                    }; 
                }

                var sql = "select @rid as rid, runOfDay from TestResult where executorPlatformData.machineName='"+hostMachineName+"'";

                var defer = $q.defer()
                this.query(sql,
                        function(data){
                            defer.resolve(data);
                        });
                return defer.promise;

            }

            var connectOrientDb = function(){
                var url=encodeURI(appConfig.orientBaseUrl+"connect/"+appConfig.dbName);
                var req ={
                             method: 'GET',
                             url: url,
                             headers: {
                               'Authorization': appConfig.authPayload
                             }
                         };
                $log.log('Request: '+req);
                var defer = $q.defer();
                $http(req).then(
                        function(res){ //Success
                            $log.log('Response: '+res);
                            defer.resolve(res);
                        }, 
                        function(res){ //Failure
                            /*throw {
                                name:   "Connection Failed",
                                level:  "Show Stopper",
                                message: "Error detected ("+response.status+"). Unable to connect to configured database.",
                                htmlMessage: "Error detected ("+response.status+"). Unable to connect to configured database.",
                                toString:    function(){return this.name + ": " + this.message;}
                            };*/
                            defer.reject(res);
                        }
                    );
                return defer.promise;
            }

            return fac;

        }
    ]);

I am getting error when fetchCurrentDayReportIdList() is called. Can anyone please guide me with a reference implementation or point out what is wrong with my code?

Note:

The global variable appConfigholds a JSON object of below format.

    {
        "orientBaseUrl": "http://localhost:2480/",
        "dbName": "atudb",
        "dbUser": "root",
        "authPayload": "cm9vdDphZG1pbg==",
        "dbPassword": "admin",
        "formatDateTime": "yyyy-MM-dd HH:mm:ss"
    }

Answer 1

in appConfig try adding Basic in the authPayLoad

"authPayload": "Basic cm9vdDphZG1pbg=="

and, of course, enable CORS like @wolf4ood said above.