Question

我有一个使用Http服务的提供程序通过localhost服务器执行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() }

有人知道为什么会这样吗？我究竟做错了什么？我使用的是最新的Angular版本。

pd：是的我尝试将http：//放在URL中的localhost之前。

编辑：将网址更改为http://localhost:3000并以适当的方式调用该属性（我忘了这件事。）我可以设法与服务器通信，但现在我有了这个问题：

ERROR [DataRequester] =>  
{…}
_body: error
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
explicitOriginalTarget: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:3000/api?collection=achieved_combined&query=columns", readyState: 4, … }
isTrusted: true
lengthComputable: false
loaded: 0
originalTarget: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:3000/api?collection=achieved_combined&query=columns", readyState: 4, … }
target: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:3000/api?collection=achieved_combined&query=columns", readyState: 4, … }
timeStamp: 3687.8557595446277
total: 0
type: "error"
__proto__: ProgressEventPrototype { lengthComputable: Getter, loaded: Getter, total: Getter, … }
headers: Object { _headers: Map, _normalizedNames: Map }
ok: false
status: 0
statusText: ""
type: 3
url: null
__proto__: Object { constructor: Response(), toString: Response.prototype.toString() }

Answer 1

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

Answer 2

好吧，首先是错误的是我没有以一种好的方式调用URL属性：实际上，它不是在方法中而是在课堂上，而我忘记了“这个”，所以我不知道指向正确的变量。

其次，修复我的编辑只需在我的快速服务器中设置CORS：

        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();
});

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

Answer 3

我只是路过给你一些代码

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
    ;
}

我已经改变了你的功能来简化它：你应该使用Observables而不是Promises。我知道，我最初也持怀疑态度，但是Observables比承诺更强大。如果您仍然不喜欢它，只需在地图操作员后面调用.toPromise()，它仍然会更清晰;）

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

Http提供程序无法访问我的本地主机服务器

3 个答案: