Question

我目前正在从Angular 2服务调用Web Api方法（名为app.service.ts的文件）它返回数据，我能够将该数据绑定到我的页面。

现在我想从Angular 2服务（名为app.service.ts的文件）中调用WCF服务。我已经尝试过与Web Api相同的功能。但它会导致Allow-Access-Origin错误。我也传递标题来解决它。但问题仍然存在。

  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/harshad.bhola@etatvasoft.com1/1",options)
                    .map((response: Response) => {
                        console.log(reponse);
                        let heroData = response.json();
                        return heroData;
                    })
                    .do(data => console.log(data))
                    .catch(this.handleError);
   }
}

我还准备了一个http-client类（组件）来传递带有请求的标头，但仍然会发生同样的错误。

那么有人可以准确地解释我如何调用WCF服务并从中获取数据吗？

Answer 1

Access-Control-Allow-Origin是响应标头，而不是请求标头。您需要将WCF配置为使用Access-Control-Allow-Origin标头设置响应，该标头设置为您尝试从中访问它的域。请注意，Access-Control-Allow-Origin不是服务器端安全性机制。因此，如果需要，您仍然需要添加适当的身份验证和授权。

关于如何执行此操作的有用答案here。可以在here中找到关于标头的更详尽的说明。

从Angular 2调用WCF服务

1 个答案: