Angular-CLI 代理不起作用答案

【问题标题】：Angular-CLI proxy doesn't workAngular-CLI 代理不起作用
【发布时间】：2017-04-25 16:56:07
【问题描述】：

我正在使用一个新的 angular-cli“我的项目”并创建了一个简单的虚拟服务。我希望这个服务连接到我本地机器上的 laravel 后端。我找到了Angular-CLI proxy to backend doesn't work，但即使是这些步骤也不适合我。 Chrome 仍然会访问 localhost:4200。

我的服务

import { Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';

@Injectable()
export class DummyService {

  constructor(private http: Http) {
    console.log('Hello dummyService');
  }

  getMessages() {
    return this.http.get('/backend/public/api/auth/login').map((res: Response) => res.json());
  }

}

我的 proxy.config.json

{
  "/backend": {
    "target": "http://localhost:81/laravelapi",
    "secure": false,
    "pathRewrite": {"^/backend" : ""},
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

还有我的 package.json 的起始属性

"start": "ng serve --proxy-config proxy.config.json",

启动时我收到以下日志消息：

** NG Live Development Server is running on http://localhost:4200 **
  0% compiling
 10% building modules 1/1 modules 0 active
 10% building modules 4/4 modules 0 active[HPM] Proxy created: /backend  ->  http://localhost:81/laravelapi
[HPM] Proxy rewrite rule created: "^/backend" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]

 10% building modules 4/5 modules 1 active ...ct\node_modules\jquery\dist\jquery.js
 10% building modules 5/6 modules 1 active ...e_modules\metismenu\dist\metisMenu.js

最后：

webpack: Compiled successfully.
[HPM] Rewriting path from "/backend/public/api/auth/login" to "/public/api/auth/login"
[HPM] GET /backend/public/api/auth/login ~> http://localhost:81/laravelapi

但在浏览器中我得到 GET http://localhost:4200/backend/public/api/auth/login 404（未找到）

所以它似乎不起作用。我正在使用“@angular/cli”：“^1.0.0”。

任何想法我做错了什么？

我只想写在我的代码里面 /backend/public/api/auth/login 那些电话应该去 http://localhost:81/laravelapi/public/api/auth/login 在我的本地机器上进行开发。

感谢您的任何建议！彼得

【问题讨论】：

我使用类似的代理配置，它适用于我。

标签： angular proxy angular-cli

【解决方案1】：

你的 URL 是 /backend/public/api/auth/login，所以你的代理应该是这个即后端/*

{
  "/backend/*": {
    "target": "http://localhost:81/laravelapi",
    "secure": false,
    "pathRewrite": {"^/backend" : ""},
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

【讨论】：

击败我 :)
@AhmedMusallam 你可以 +1 :) ;)
@peter : 欢迎您.. 如果有帮助，您可以投票
您好，我也有同样的问题，但是您的方法不起作用。也许你有什么想法？ stackoverflow.com/questions/44872498/…谢谢

【解决方案2】：

步骤

1) 在 Angular CLI 应用程序根文件夹中创建一个名为 proxy.conf.json 的新文件

粘贴以下 JSON 对象。

{
  "/*/*": {
    "target": "http://localhost:81",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

2) 打开package.json 文件并更改：

 "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },

...到：

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

A) 打开命令提示符

B) 转到 Angular Cli 应用程序的根文件夹

C) 输入npm start 并回车

【讨论】：