Angular2 http.get(url)在有效网址上返回404 - 而不是CORS问题

时间:2017-01-19 21:43:50

标签: angularjs django angular django-rest-framework

我正在运行一个Angular2 App试图调用我的Django服务器。

我有一个名为getObjects的函数,它调用外部API并返回一个对象列表。作为一些调试,我目前正在制作XMLHttpRequest,它正确地从我的服务器中获取数据。

但是,每当我尝试使用Http.http.get(url)发出请求时,我都会看到404错误。我试过摆弄一些HTTP标头,以及在我的服务器上玩一些设置,但我无法弄清楚出了什么问题。

我假设Http.http.get()方法在我不知道的幕后做了一些时髦的事情。奇怪的是,我的浏览器开发网络选项卡甚至没有显示任何尝试访问我的外部浏览器。

我非常感谢任何有关此事的帮助,我可以提供任何额外的调试信息,并且可以在正确的方向上使用一个点。

ng --version
angular-cli: 1.0.0-beta.24
node: 6.9.1
os: win32 x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.4.3
@angular/compiler-cli: 2.4.3

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

...
  constructor(private http: Http) { }

  getObjects(): Promise<Object[]> {
    function httpGet(theUrl)
    {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return xmlHttp.responseText;
    }

    var x = httpGet(this.myUrl);
    console.log(x); // This works perfectly and I see an entry on my server log

    this.http.get(this.myUrl)
    .subscribe(res => console.log(res));// This throws a 404 and I see no entry on my server logs nor  in my browser network tab

    var headers = new Headers({'content-type': 'application/json'});

    this.http.get(this.myUrl, {headers: headers})
    .subscribe(res => console.log(res));// This throws a 404 and I see no entry on my server logs nor  in my browser network tab

    return this.http.get(this.myUrl)
      .toPromise()
      .then(response => response.json().data as Object[])
      .catch(this.handleError); //The original code that worked on an internal in-memory-api
  }

3 个答案:

答案 0 :(得分:3)

我能够在另一个堆栈溢出问题中找到工作修复:

Angular 2 HTTP GET returning URL null

问题在于InMemoryWebApiModule,解决方案是对app.module.ts文件进行以下配置修改:

$('#datetimepicker1').datetimepicker({});
$('#datetimepicker1').data("DateTimePicker").date(moment(new Date ).format('DD/MM/YYYY HH:mm'));

进行这个小配置更改会导致应用程序正常工作。

答案 1 :(得分:2)

实际上没有404,因为您没有执行您的请求。你需要subscribe()来执行它们。几个例子:

this.http.get(this.myUrl).subscribe(res => console.log(res));
this.http.get(this.myUrl).subscribe();
let response: Observable<Response> = this.http.get(this.myUrl);
response.subscribe();
response.subscribe(v => console.log(v);

您可以在此处阅读有关可观察量的内容: http://reactivex.io/rxjs/manual/index.html

答案 2 :(得分:0)

这可能是angular2-in-memory-web-api的问题。我遇到了同样的问题,但当我从AppModule中删除InMemoryWebApiModule时,API调用完美无缺。