AngularJS to get Salesforce data using REST API

Question

Below is my angular code to get contact. It runs locally using nodejs.

    angular.module('demoApp')
.factory('contactService', function($http, $q) {
    return {
        getContactDetails: function(quoteId) {
            var soql = 'SELECT Name FROM Contact Limit 1;
            var url = 'http://cs18.salesforce.com/services/data/v30.0/query?q=' + encodeURIComponent(soql);
            var sessionId = '00D1100000BzLId!ASAAQPOKAZvD05Q1Jy71YcLdkK0Y_tGwK1bqTUcFfYLS8THKJ5DJtC2VXmrswtBWvjjp';
            var deferred = $q.defer();
            $http({url:url,method:'GET',headers:{'Authorization': 'OAuth ' + sessionId}}).success(function(data, status) {
                deferred.resolve(data);
            }).error(function(err, status) {
                console.log(err);
                deferred.reject(err);
            });
            return deferred.promise;        
        }
    };
});

But it gives me this error

XMLHttpRequest cannot load http://cs18.salesforce.com/services/data/v30.0/query?q=SELECT%20Name%2C%20A…oposal__Proposal_Name__c%20FROM%20Apttus_Proposal__Proposal__c%20Limit%201. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

How can I fix it? Any thoughts?

Answer 1

Add below config headers in your Angualar JS Factory and white-list your VF page instance url in salesforce CORS:

Check it out the : http://sarvatsfdc.com/2015/08/07/angularjs-highcharts-wijmotable/ ( Angular JS Controller line # 290 )

myApp.config(['$httpProvider',function ($httpProvider) {
 var sessionId = "{!$Api.Session_ID}";

 $httpProvider.defaults.useXDomain = true;
 delete $httpProvider.defaults.headers.common["X-Requested-With"];
 $httpProvider.defaults.headers.common["Access-Control-Allow-Origin"] = "*";
 $httpProvider.defaults.headers.common["Accept"] = "application/json";
 $httpProvider.defaults.headers.common["content-type"] = "application/json";
 $httpProvider.defaults.headers.common['Authorization'] = "OAuth " + sessionId ;
 $httpProvider.defaults.headers.common['X-User-Agent'] = "MyClient" ;
}]) ; 

Answer 2

In my experience angular works like charm with JavaScript tempting services ... You achieve the same results by writing simple apex methods and consuming the json on angular side.

Answer 3

I'd recommend using JSforce; I've used it for accessing the Salesforce REST API from a MEAN app before and it's pretty well-documented. It's also open-sourced on GitHub and actively maintained by the authors.

Answer 4

try running your browser with security diabled i.e. click start->run and type:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

the error you're getting is to do with CORS (cross origin resource sharing)