后端的角度代理不起作用?

时间:2018-03-21 13:55:47

标签: angular proxy angular-cli

我按照角网站中提到的一步一步做了所有事情,仍然没有请求代理。

8080 - 我的springboot app和后端4200 - 我的Angular2前端

在Angular2项目中,我有文件proxy.cons.json,内容如下:

{
  "/api": {
     "target": "http://localhost:8080",
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug"
  }
}

在Angular2 package.json中,我将启动过程更改为"启动":" ng serve --proxy-config proxy.conf.json"

当我在指挥官内部键入npm start然后在开始时我可以看到代理创建:/ api - > http://localhost:8080。好吧,到目前为止我觉得很好。

我试图发送请求(Angular2)

以下是我的service.ts文件

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

@Injectable()
export class SpipService 
{

  constructor(private http: Http) { }

  callRest():  Promise<string> {
    let context:String =  window.location.pathname.split('/').slice(0,-1).join('/');
    console.log("Please check--------------->");
    return this.http.get("/api/serviceContext/rest/hello/")
      .toPromise()
      .then(response => response.text() as string)
      .catch(this.handleError);
  }

    private handleError(error: any): Promise<any> {
    console.error('Some error occured', error);
    return Promise.reject(error.message || error);
  }
}

的package.json:

{
  "name": "angular",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.8",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

我收到http://localhost:4200/api/serviceContext/rest/hello/ 404(未找到)的错误。我们可以看到,没有任何代理。为什么?

要清楚。当我手动去,一切正常。请指导。

2 个答案:

答案 0 :(得分:0)

你的JSON应该是这个

{
  "/api": {
     "target": "http://localhost:8080",
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug"
  }
}

让您的通话看起来像这样

return this.http.get("/api/serviceContext/rest/hello/"). 

编辑我自己的配置:

{
  "/api": {
    "target": "http://private-url-your-peeker:8765/",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

我的电话

return this.http.get("api/serviceContext/rest/hello/"). 

答案 1 :(得分:0)

在我按proxy.conf.json修改后,所有事情似乎都运作良好。希望它能帮助将来的人:

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