Javascript Http提供程序不支持'；无法访问我的本地主机服务器_Javascript_Angular

Javascript Http提供程序不支持'；无法访问我的本地主机服务器

javascript angular

Javascript Http提供程序不支持'；无法访问我的本地主机服务器,javascript,angular,Javascript,Angular,我有一个提供程序，它使用Http服务在本地主机服务器上执行GET操作： requestAchievedCombined(config){ return new Promise( (resolve, reject) => { const URL = "localhost:3000"; const query = "?collection=achieved_combined&query=columns";

我有一个提供程序，它使用Http服务在本地主机服务器上执行GET操作：

 requestAchievedCombined(config){
        return new Promise( (resolve, reject) => {

            const URL = "localhost:3000";
            const query = "?collection=achieved_combined&query=columns";
            this.http.get(URL+"/api"+query).subscribe( response => {
                // TODO: check data integriy
                console.log(">> API RES: ", response)
                resolve(response);

            }, err => this.errorHandler(err, reject));
        })
    }

服务器托管在localhost:3000中并正在运行，当使用相同的GET查询字符串从导航器调用时，它可以完美地工作。。。它返回一些JSON

问题是，当我执行Angular应用程序时，会出现以下错误：

ERROR [DataRequester] =>  
{…}
_body: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /function%20URL()%20%7B%20%20%20%20[native%20code]%7D/api</pre>\n</body>\n</html>\n"
headers: Object { _headers: Map, _normalizedNames: Map }
ok: false
status: 404
statusText: "Not Found"
type: 2
url: "http://localhost:4200/function%20URL()%20%7B%20%20%20%20[native%20code]%7D/api?collection=achieved_combined&query=columns"
__proto__: Object { constructor: Response(), toString: Response.prototype.toString() }

URL是一个被“调用”的全局函数。尝试将URL变量重命名为URL，它应该可以工作。

好的，第一个错误是我没有以良好的方式调用URL属性：实际上，它不在方法中，而是在类中，我忘记了“this.”，所以我没有指向正确的变量

其次，修复了我的编辑问题，只需在我的express服务器中设置CORS即可：

requestAchievedCombined(config): Observable<any> {
  const URL = "localhost:3000";
  const query = "?collection=achieved_combined&query=columns";
  return this.http.get(URL+"/api"+query)
    .map( response => {
      // TODO: check data integriy
      console.log(">> API RES: ", response)
      return response;
    }, err => this.errorHandler(err))
    // .toPromise() // If you still want your cherished promise
    ;
}

现在我的Angular应用程序正确地获取了数据

我只是路过给你一些代码

requestAchievedCombined（配置）：可观察{
const URL=“localhost:3000”；
const query=“？collection=acquired\u combined&query=columns”；
返回此.http.get（URL+“/api”+查询）
.map（响应=>{
//TODO:检查数据完整性
console.log（“>>API资源：”，响应）
返回响应；
}，err=>this.errorHandler（err））
//.toPromise（）//如果你仍然想要你珍爱的承诺
;
}

我改变了你的函数来简化它：你应该使用可观察的而不是承诺。我知道，一开始我也很怀疑，但观察结果比承诺更有力。如果您仍然不喜欢它，只需在map操作符之后调用

.toPromise（）

，它仍然会更清晰；）

除此之外，您是否可以发布错误跟踪而不是有效负载？我们需要错误消息来了解发生了什么

谢谢大家!！修正了这件事，但现在我得到了另一个错误；让我来编辑这篇文章。

        app.use(function(req, res, next) {
            res.header("Access-Control-Allow-Origin", "*");
            res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            next();
});

requestAchievedCombined(config): Observable<any> {
  const URL = "localhost:3000";
  const query = "?collection=achieved_combined&query=columns";
  return this.http.get(URL+"/api"+query)
    .map( response => {
      // TODO: check data integriy
      console.log(">> API RES: ", response)
      return response;
    }, err => this.errorHandler(err))
    // .toPromise() // If you still want your cherished promise
    ;
}