代理配置不适用于Angular CLI

问题描述：

8080 –托管后端的端口 4200 –我的Angular2前端

8080 – Port where backend is hosted 4200 – my Angular2 frontend

在我的Angular2项目中，我有文件proxy.config.json，其内容如下:

In My Angular2 project i have file proxy.config.json with content like this

{
  "/api": {
  "target": "http://localhost:8080",
  "secure": false,
  "changeOrigin": "true",
  "pathRewrite": {"^/api": ""}
 }
}

在Angular2 package.json中，我将启动过程更改为"start": "ng serve --proxy-config proxy.config.json" 当我在Commander npm start中键入内容时，一开始我会看到代理已创建:/api-> http://localhost:8080 一个>.好吧，到目前为止我认为还不错.

In Angular2 package.json I changed start procedure to "start": "ng serve --proxy-config proxy.config.json" When I type inside commander npm start then at the start I can see Proxy created: /api -> http://localhost:8080. Well, so far is good I guess.

我正在尝试发送请求(Angular2)

I’m trying to send a request (Angular2)

  constructor(private http: Http) {
    this.getUsers();
  }

  getUsers(): any {
    return this.http.get("/api/getusers")
      .subscribe(response => {
        console.log(response);
      })
  }

我收到一个错误，提示 http://localhost:4200/api/getusers 404(未找到).如我们所见，没有什么可以替代的.为什么?我做错什么了吗?

I’m getting an error that http://localhost:4200/api/getusers 404 (Not Found). As we can see, nothing has been proxied. Why? Did I do something wrong?

Visual Studio代码的控制台输出是

Console output of visual studio code is

 10% building modules 2/2 modules 0 active[HPM] Proxy created: /api/  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
Hash: d102bcd0909a1776c844
Time: 27041ms
chunk    {0} main.bundle.js, main.bundle.map (main) 13.6 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 130 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.87 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
[HPM] Rewriting path from "/api/getusers" to "/getusers"
[HPM] GET /api/getusers ~> http://localhost:8080

这是浏览器控制台响应:

This is browser console response:

GET http://localhost:4200/api/getusers 404 (Not Found)
error_handler.js:54 EXCEPTION: Response with status: 404 Not Found for URL: http://localhost:4200/api/getusers
Subscriber.js:238 Uncaught Response {_body: "<html><head><title>Apache Tomcat/7.0.47 - Error re…hade"><h3>Apache Tomcat/7.0.47</h3></body></html>", status: 404, ok: false, statusText: "Not Found", headers: Headers…}

答

我已经尝试过这种方法. 我的proxy.conf.json文件是这样的:

I have tried this way. my proxy.conf.json file is like this:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": "true",
    "pathRewrite": {"^/api": ""}
  }
}

，我已经用package.json中的"start": "ng serve --proxy-config proxy.conf.json"替换了"start": "ng serve"

and I have replaced "start": "ng serve" with this "start": "ng serve --proxy-config proxy.conf.json" in package.json

我的app.component.ts文件是这样的:

my app.component.ts file is like this:

  constructor(private http: Http) {
    this.getUsers();
  }

  getUsers(): any {
    return this.http.get("http://localhost:4200/api/getusers")
      .subscribe(response => {
        console.log(response);

      })
  }

在我的API中，它从 http://localhost:8080/getusers 提供了一组用户网址

in my API it provides set of user from http://localhost:8080/getusers URL

代理配置不适用于Angular CLI

相关推荐