Angularjs service call error No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I have a simple WCF service hosted and the signature of interface is like this

[OperationContract]
[WebInvoke(Method = "Get", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "GetMyName/")]
string GetMyName();

But when I call this service through angular $http like I always end up getting the error "No access control" as mentioned in question title.

httpService.HttpGet('/MyTestService.svc/GetMyName')
                   .then(function (response) {
                     var o=response;                                                      
                    }, function (error) {
                    console.log('An error occured. status : ' + JSON.stringify(error));
                    });

Details service layer

(function () {
// Define dependency injection parameters  
var injectParams = ['$http'];

// Create the httpService. This service will act as gateway for all calls to WCF channel service.
var httpService = function ($http) {
    // Initialize WCF channel service base url to NULL
    //this.baseServiceUrl = 'http://localhost:12345/TACapp/WS';

    this.baseServiceUrl = 'http://wvm10311:1000/services';

    // Post function
    this.HttpPost = function (data, route) {
        return $http.post(this.baseServiceUrl + route, data);
    }

    // GET function
    this.HttpGet = function (route) {
        return $http({ method: 'GET', url: this.baseServiceUrl + route });
    }
}

// Set dependency injection parameters to service object
httpService.$inject = injectParams;

// Register service
appConfig.service('httpService', httpService);

} ());

Here is error screenshot from chrome console.

Answer 1

This is a CORS issue - have a look at this post: No 'Access-Control-Allow-Origin' header is present on the requested resource- AngularJS

In short, you'll need to add a specific Header to tell it that it's ok for the origin to be different. That post contains more info on how to do this.

Answer 2

You are probably making ajax request to a different domain, and browser won't allow that unless your server supports CORS. Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser.

In-short you have to add specific headers in your server to make the ajax request work -

Access-Control-Allow-Origin: * [or your domain name instead of *]

To know more about it please read - Adding CORS Support to server.