CODEWITHSUNDEEP
angularproxyangular-cli
sTg
sTg

Reputation: 4434

Angular proxy to backend is not working?

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.

Upvotes: 2

Views: 12110

Answers (2)

sTg
sTg

Reputation: 4434

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

Upvotes: 4

user4676340
user4676340

Reputation:

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/").

Upvotes: 1

Related Questions