Calling WCF REST service using AngularJs giving error

Question

I am trying to call my WCF REST service(hosted in non PROD environment) from my local machine using AngularJS . But everytime i am getting

SEC7119: XMLHttpRequest for http://XXX/XXX/Web/rest/GeDetails required CORS preflight.

and

SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

Is there any way i can consume WCF REST service using AngularJS ?

thanks!

Answer 1

You had a CORS error.

You must enable CORS in your api -> enabling-cross-origin-requests-in-web-api

for WCF Rest try this

And then in your angular.config you must:

    angular.module('myapp',[...])
    .config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
        // ...
  })

Apparently in the latest AngularJS versions you don't have to add anything to make it work . But actually for me works in this way.

I hope this helps

Answer 2

used below code in my service global.asax page and its working perfect.

 protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }