Question

我正在尝试从我的Angular 2应用程序调用Web服务。

private baseUrl: string = 'http://localhost:3000/api';

getPatterns(): Observable<Pattern[]> {
    const patterns$ = this.http
        .get(`${this.baseUrl}/pattern`, {headers: this.getHeaders()})
        .map(this.mapPatterns)
        .catch(this.handleError);
    return patterns$;
}

private getHeaders() {
    const headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
}

这给我一个404错误的网址：http://localhost:3000/api/pattern即使我在浏览器中打开网址或尝试从POSTMAN中调用它时得到有效的回复。

任何帮助指出为什么这不起作用将不胜感激。

谢谢！

Answer 1

Vetemi的回答为我解决了这个问题的第一步。我已经构建了我的Angular App以及Angular Tour Of Heroes教程并删除了In Memory web api服务中的依赖关系解决了404错误。之后我收到了CORS错误，特别是错误读取：

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。

我的API是一个.Net Core 2.0 API，所以我需要启用我按照此链接中的步骤执行的CORS

https://docs.microsoft.com/en-us/aspnet/core/security/cors

这是我的Startup.cs文件的精简版

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();
        services.AddMvc();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors(builder => builder.AllowAnyOrigin());
        app.UseMvc();
    }

Answer 2

万一，您还没有找到问题，也没有找到遇到同样问题的人。

您是否使用过教程Angular Tour of Heroes中的内存数据库？如果是，那么这可能是问题所在。依赖

"angular-in-memory-web-api": "~0.2.4",

拦截您的http请求。删除此依赖项可能会有所帮找到了解决方案here。

Answer 3

您的标头不包含任何内容，因此响应为404.请参阅以下更改

private getHeaders() : Headers {
    const headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
}

原因：方法的默认返回类型为void，因此当您返回时需要显式返回类型

即使服务在测试时起作用，Angular 2 api呼叫也会响应404

3 个答案: