Angular proxy to backend is not working?

Question

I did everything step by step as mentioned in angular site and still requests aren't proxied.

8080 - my springboot app and backend 4200 - my Angular2 frontend

In Angular2 project I have file proxy.cons.json with content like this:

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

In Angular2 package.json I changed start procedure to "start": "ng serve --proxy-config proxy.conf.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.

I'm trying to send a request (Angular2)

Below is my service.ts file

   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"
  }
}

I'm getting an error that http://localhost:4200/api/serviceContext/rest/hello/ 404 (Not Found). As we can see, nothing has been proxied. Why?

To be clear. When I go manually, all works fine. Please guide.

sTg · Accepted Answer · 2018-03-22 05:24:51Z

4

After i modified by proxy.conf.json as below all things seems to be working well. Hope it helps someone in future:

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

answered Mar 22, 2018 at 5:24

sTg

4,47418 gold badges74 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2018-03-21 14:27:07Z

1

Your JSON should be this

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

Making your calls look like this

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

EDIT My own configuration :

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

My calls

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

edited Mar 21, 2018 at 14:27

answered Mar 21, 2018 at 14:00

user4676340

13 Comments

sTg Over a year ago

zone.js:2935 GET localhost:4200/api/serviceContext/rest/hello 404 (Not Found)

user4676340 Over a year ago

Well this time, allow me to doubt you, because I have the same code right before my eyes, and it works. Are you sure you didn't do something else ?

sTg Over a year ago

I have just updated my question with what you said. Please let me know if i am being anywhere wrong.

user4676340 Over a year ago

This doesn't seem to have any issue now. Are you sure your endpoint is up ?

sTg Over a year ago

But if you see the url it is still taking 4200.. yes it is up.. it should not be coming 4200 know??.

|

Collectives™ on Stack Overflow

Angular proxy to backend is not working?

2 Answers 2

Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related