Angular 6 中的代理配置出现“未找到”错误答案

【问题标题】：'not found' error with proxy config in Angular 6Angular 6 中的代理配置出现“未找到”错误
【发布时间】：2019-02-18 06:27:24
【问题描述】：

我使用 .net Core Web API + Angular 6。

Angular 端口：4200 和 Web API 端口：62633

我想在 Angular 6 中使用代理配置，但总是遇到同样的错误。我已阅读与此问题相关的答案，但找不到解决方案。来源：https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

proxy.conf.js

const PROXY_CONFIG = {
    "/api": {
        "target": "http://localhost:62633",
        "secure": false,
        "pathRewrite": {
            "^/api": "http://localhost:62633"
        },
    }
}
module.exports = PROXY_CONFIG;

angular.json

"architect": {
...
"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "projectname:build",
            "proxyConfig": "proxy.conf.js",
            "port": 4200
          },
          "configurations": {
            "production": {
              "browserTarget": "projectname:build:production"
            }
          }
        }...
}

account.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { LoginDto } from '../../../dtos/account/accountDtos';
import { Observable } from 'rxjs';

@Injectable()
export class AccountService {
  constructor(private hC: HttpClient) { }

  login(loginModel: LoginDto): Observable<LoginDto> {
    return this.hC.post<LoginDto>('/api/login', loginModel);
  }
}

控制台中的结果：

zone.js:2969 POST http://localhost:4200/api/login 404 (Not Found)

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/login", ok: false, …}

我不这么认为，但是，错误的来源，可能与包有关吗？谢谢。

【问题讨论】：

您是否有特定原因不像 Wiki 那样使用 .json 文件？
是的，为了未来。我会绕过

标签： angular proxy angular6 asp.net-core-webapi

【解决方案1】：

问题解决了。遇到同样错误的人，请检查您的API :)

还有，

PROXY_CONFIG

"pathRewrite": {
            "^/api": ""
        },

和 account.service.ts

login(loginModel: LoginDto): Observable<APIResult> {
    return this.hC.post<APIResult>('/api/account/login', loginModel.toJSON());
  }

【讨论】：

添加"pathRewrite": { "^/api": "" }解决我的问题，谢谢分享

【解决方案2】：

使用

return this.hC.post<LoginDto>('/api/login', loginModel);

在我看来，您正在向自己的 Angular 服务器而不是后端发出发布请求，您确定要这样做吗？也许你需要类似的东西

return this.hC.post<LoginDto>(this.yourBackendUrl + '/api/login', loginModel);

在你的构造函数中设置

this.yourBackendUrl = this.PROXY_CONFIG["/api"]["target"]

【讨论】：

谢谢你的回答，但我不想这样解决。