Call WCF Service from Angular 2

Question

I am currently calling a Web Api method from an Angular 2 service (file named app.service.ts) which returns data and I am able to bind that data into my Page.

Now I want to call a WCF Service from an Angular 2 service (file named app.service.ts). I already tried the same thing as I did for Web Api. But it results in an Allow-Access-Origin error. I am also passing headers for resolve it. But the issue is still there.

  import {Http,Response,Headers,RequestOptions} from "@angular/http"
  import { Observable } from 'rxjs/Rx';

  @Injectable()
  export class HeroService {
  Hero = [];

   baseUrl = 'http://192.168.0.4/ITM1.3/Service1.svc/Delete502/';

   constructor(private _http: Http) {
        this.loadHeroes();
   }

   loadHeroes() {

   let headers = new Headers({ 'Content-Type': 'application/json' },{'Access-Control-Allow-Origin' : '*'},{'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT, DELETE'});
   let options = new RequestOptions({ headers: headers });
   return this._http.get(this.baseUrl+"Login/[email protected]/1",options)
                    .map((response: Response) => {
                        console.log(reponse);
                        let heroData = response.json();
                        return heroData;
                    })
                    .do(data => console.log(data))
                    .catch(this.handleError);
   }
}

I also prepare one http-client class(component) for passing header with the request but still the same error occurs.

So can anyone exactly explain how I can call a WCF Service and get data from it?

Answer 1

Access-Control-Allow-Origin is a response header, not a request header. You'll need to configure WCF to respond with the Access-Control-Allow-Origin header set for the domain you're trying to access it from. Do note that Access-Control-Allow-Origin is not a server-side security mechanism. So you'll still need to add proper authentication and authorization if needed.

A useful answer on how to do that can be found here. A more thorough explanation on the header can be found here.