Angular-CLI proxy to backend still doesn't work for some reason

Question

I'm using angular-cli, running project from localhost:4200 and trying to get server request from myurl:8080. This isn't working for some reason, have tried all the options but none helped.

Here is my proxy.config.json file:

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

A simple http.get :

  private Url = 'http://myurl:8080/myservice/list/getlist';

  headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
  options = new RequestOptions({ headers: this.headers, withCredentials: true});

  getList (): Observable<any> {
    return this.http.get(this.Url, this.options)
      .map(this.extractData)
      .catch(this.handleError);
  }

The browser result is:

403 (Forbidden). Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

If I just surf to http://myurl:8080/myservice/list/getlist I will get the JSON result. Did any one made it worked?

after npm start @Angular/cli is writing

Proxy created: /myservice -> http://myurl:8080
[HPM] Proy rewrite rule create "^/myservice" ~"
[HPM] Subscribed to http-proxy events: ['error', 'close']

Is that normal?

score 1 · Answer 1 · answered Aug 10 '17 at 08:13

The problem is that you are trying to call from localhost the full backend url. If you want the "changeOrigin" proxy option to make apply you have to try to call the backend like this:

http://localhost:4200/myservice this will point to -> http://backendUrl:8080/myservice and server will see as origin the backendurl.

if we want to emit the myservice from the backendurl then path rewrite proxy option is "pathRewrite": {"^/myservice" : ""}

SO try to call backend using the localhost:4200/myservice and set the proxy configs like this:

{
  "/myservice/*": {
    "target": "http://myurl:8080",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
  }
}

TIP: For more advanced options, as the angular-cli serve use webpack-dev-server which also use the http-proxy-middleware which also use the http-proxy you may also apply their options to the proxy.conf.js file. https://github.com/chimurai/http-proxy-middleware#options

e.x cookieRewrite

const PROXY_CONFIG = [
  {
    context: [
      "/myservice"
    ],
    target: "http://backendurl",
    secure: false,
    logLevel: "debug",
    changeOrigin: true,
    cookieDomainRewrite: {
      "backendurl": ""
    }
  }
];

module.exports = PROXY_CONFIG;

score -1 · Answer 2 · answered Mar 26 '17 at 15:59

-1

Hi i got the same problem, have you check that you start with 'ng serve --proxy-config proxy.conf.json' ? If yes try a 'catch all proxyconfig' like this:

{
  "**": {
  "target": "http://myurl:8080",
  "secure": false,
  "changeOrigin": false,
  "logLevel": "debug"
  }}

with this you can test if any request goes to your backendserver.

answered Mar 26 '17 at 15:59

Florian Hilfenhaus

62
1
8

Hi, I have the same problem, but your method does not work. Maybe you have any ideas? https://stackoverflow.com/questions/44872498/configure-angular-cli-proxy-for-custom-headers-in-request-to-backend Thanks – JDev Jul 02 '17 at 16:28

Angular-CLI proxy to backend still doesn't work for some reason

2 Answers2