交叉源请求在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服务而不在其他计算机上托管我的服务？

您遇到了这个问题，因为您发送的标头与后端中的标头不匹配

所以让我们假设在前端您发送头

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

所以像“Authorization”、“Content-type”、“Access-Control-Allow-Origin”这样的头应该与后端中的头Allow匹配

因此，在后端中，“访问控制允许标头”应该包含上述所有标头 见下文

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

因此，在访问控制允许标头中，您必须传递从前端发送的所有标头：“授权”、“内容类型”、“访问控制允许来源”

---

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

您需要为您的服务启用CORS。也许这会有所帮助：如果您使用angular cli，您只需添加一个代理，而不必担心CORS头。@MikeOne您可能想添加它作为答案-举一个简短的例子。