Question

我是Angular2的新手。我在WCF的本地机器上创建了一个服务并运行它。创建一个返回字符串的简单方法，代码如下所示。

    public string JSONData(string id)
    {
        return "You requested product is " + id;
    }

现在我想在我的service.ts文件中的Angular2应用程序中访问该服务。访问服务方法的代码如下所示：

   testService(){
        return this._http.get('http://localhost:49753/RestServiceImpl.svc/json/4')
        .map(res => res.json())
        .do(data => console.log("Testing service" + JSON.stringify(data)))
        .catch(this.handleError);
    }

但是当我运行代码时，我收到以下错误： “阻止跨源请求：同源策略禁止在http读取远程资源....”

有没有办法在不在其他机器上托管我的服务的情况下调用我的WCF服务？

Answer 1

您收到此问题时，您发送的标头与后端的标头不匹配

因此，假设您在前端发送标题

contentHeaders = new Headers();
contentHeaders.append('Authorization', 'Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2');
contentHeaders.append('Content-Type', 'application/json');
contentHeaders.append('Access-Control-Allow-Origin', '*');

所以这些标题包括＆＃39;授权＆＃39;，＆＃39;内容类型＆＃39;，＆＃39;访问控制 - 允许 - 来源＆＃39;应与后端的标题匹配。

所以在后端＆＃39; Access-Control-Allow-Headers＆＃39;应该有以上所有标题见下文

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Authorization,content-type,Access-Control-Allow-Origin");

因此，在Access-Control-Allow-Headers中，您必须传递从前端发送的所有标头：＆＃39;授权＆＃39;，＆＃39;内容类型＆＃39;，＆＃39;访问 - 控制允许来源＆＃39;

当您使用上述概念时，它将完美运作。

Angular2

1 个答案: