Angular-cli: Proxy not working when running ng serve

[mackelito]

OS?

Mac OSX (Sierra)

Versions.

@angular/cli: 1.0.0-beta.31
node --version v6.9.1

Repro steps.

Need to run a proxy so I added --proxy-config proxy.conf.json in package.json
This works if I run npm start but then I cant access the site from my mobile on the same network.
If I run ng serve then I can use my mobile to test the site but the proxy stopps working.. ?

[martinmcwhorter]

Did you try

ng serve --proxy-conf proxy.conf.json

?

[mackelito]

It starts but I´m not able to navigate to 192.168.1.207:4200
(http://localhost:4200/ works on the laptop)

[mackelito]

I was kind of hoping that adding something like "start": "ng serve --proxy-config proxy.conf.json", to package.json would solve it for me but nope.. :(

[Meligy]

Try using the --host flag with ng serve.

Like ng serve --proxy-conf proxy.conf.json --host 192.168.1.207
Or even ng serve --proxy-conf proxy.conf.json --host 0.0.0.0

It can also be stored in angular-cli.json under defaults:

{
  ...
  "defaults": {
    ...
    "serve": {
      ...
      "host": "192.168.1.207"
    },
    ...
  }
  ...
}

[mackelito]

Worked like a charm!.. thx! :)

[mackelito]

Spoke to soon...
adding this to make it default didnt work :/

"serve": { "host": "0.0.0.0", "proxy-conf": "proxy.conf.json" },

But it works if I run it in the terminal
ng serve --proxy-conf proxy.conf.json --host 0.0.0.0

It starts but proxy is not working..

[Meligy]

I think to do 0.0.0.0 and to accept incoming connections from other laptops you need either a firewall rule or the process needs to run as admin. This is at least in Windows. Not sure if this is the specific problem or not.

[filipesilva]

We don't support having the proxy-conf setting in the CLI json currently, only port/host/ssl/sslKey/sslCert. That is why it doesn't work when you put it there.

I'll accept it as a feature request if someone wants to take it on. Otherwise this is a consideration for 2.0 (having everything customizable in the config file).

[hantsy]

@mackelito I added similar command line(ng serve --host 0.0.0.0 --port 4300 --proxy-config proxy.conf.json) in package.json, and follow the Proxy to backend wiki page to create a proxy.conf.json in the same folder with package.json, but it still does not work.

I am using Windows 10, I am not sure if this is a system specific problem. When I used ng eject to export webpack.config.json and configure the proxy in the devServer section, it still get the same errors in cmd console.

[HPM] GET /api/upload/uploads-1490782788752.png -> http://localhost:3000
[HPM] Error occurred while trying to proxy request /api/upload/uploads-1490782788752.png from localhost:4300 to http://localhost:3000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

[hantsy]

I have added my detailed development environment in issue #https://github.com/angular/angular-cli/issues/889#issuecomment-290112673

[chadbr]

fwiw, I could really use this... having a tough time putting authentication in front of serving up our app without a proxy to do it... hate to eject the config.

[chadbr]

@filipesilva also - should this have a "this doesn't work yet" marker somewhere?

https://github.com/angular/angular-cli/wiki/stories-proxy

I spent a few days trying to get this to work -- I assumed the story doc's meant it was usable...?

[filipesilva]

https://github.com/angular/angular-cli/pull/6493 added support to have the proxy config in .angular-cli.json, so that bit is sorted.

@chadbr the story described in https://github.com/angular/angular-cli/wiki/stories-proxy is working, and has been working for a long time, to the best of my knowledge. I have to suppose you did some modifications there. What were they?

So the remaining problem is that incoming connections when --host=0.0.0.0 is used? You might need to use --public-host/--disable-host-check as Webpack not enforces it (see https://github.com/angular/angular-cli/pull/6173).

Ultimately though, you should really check out https://webpack.github.io/docs/webpack-dev-server.html#proxy as the proxy doc suggests (or the newer https://webpack.js.org/configuration/dev-server/#devserver-proxy). We only enable passing on these options, webpack provides the functionality proper.

[chadbr]

@filipesilva - sorry, I misread your comment above --

We don't support having the proxy-conf setting in the CLI json currently, only port/host/ssl/sslKey/sslCert. That is why it doesn't work when you put it there.

I thought that meant the feature didn't work :)

fwiw, I can't get redirects to work when it goes to a public https host -- but it works great locally.

[khag7]

Maybe off topic, but I'd greatly appreciate having all the ng serve options available in the config file.

If currently have to use ng serve --host 0.0.0.0 --public-host dev.domain.com:14200 --poll 1000 -- i need polling because I'm running angular-cli on vagrant on windows (shared drive) and I want to serve the site to an in-house "public" web server (public-ish ... protected from outside world but shared with a few other co-workers while we make updates to files). Maybe I'm doing something wrong, but it seems to work, its just frustrating that we can't set up the settings in a config file and have to specify on the CLI every time.

Edit: a note on the port if anyone is curious, we run forward the port 4200 to the external port 14200 since we run several different vagrant machines for various testings.

[surajj]

[email protected] start /home/user/Documents/workspace-sts-3.8.3.RELEASE/AppCURD
ng serve --proxy-conf proxy.conf.json --host 0.0.0.0

Proxy config file /home/user/Documents/workspace-sts-3.8.3.RELEASE/AppCURD/proxy.conf.json does not exist.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: ng serve --proxy-conf proxy.conf.json --host 0.0.0.0
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/user/.npm/_logs/2017-12-20T18_25_15_080Z-debug.log

[Tusko]

Here is my working code:

{
  "/api/*": {
    "target": "http://backend.site.example",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "http://backend.site.example/api"
    }
  },
  "/assets/*": { // assets
    "target": "https://site.example/app",
    "changeOrigin": true,
    "secure": true
  }
}

[ravichandan]

I am facing a problem with my app when trying to hit a backend server which is on https with invalid certificate. The following is my proxy.conf.json.

{
  "/api": {
    "target": "https://www.dev.xxxxxx.au",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

This is working fine for GET request, but when I tried POST I am getting the following

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:4455' is therefore not allowed access. The response had HTTP status code 405.

If localhost:4455 origin is not allowed, then it shouldn't work for GET as well, but I can able to GET the data from that server. Tried adding

    "pathRewrite": {
      "^/api": ""
    }

but with no luck. Stuck on this since a day.. Any ideas???

[rostislavprovodenko]

All right, friends, what worked for me is strangely enough changing the backend port from 3000 to 3001. Not sure what's so special about 3000, but I've noticed it was used in all posts of people experiencing the problem. Changing it to 3001 fixed the problem for me.

[kultigin]

This is an on going issue for me. And very annoying. I have most of the api calls running but sometimes the application doesn't even start because of ECONNRESET. I select one user account and I get details for it, when I select another user account it fails to load. So it is mostly unpredictable.Linux people running same code same ng-serve do not have this issue by the way. I am on MAC OSX that should say something too. Port changing didn't work for me our api is on localhost:8080 it is all used in development.

[nikithaperuka89]

@kultigin trying add the below to avoid ECONNRESET error
{
"/emport-api/*": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"headers": {
"Connection": "keep-alive"
}
}
}

[kultigin]

Yes sorry I have found and done this fix
"Connection": "keep-alive"
which fixed my issue.
Didn't update this page sorry. Thanks for posting.

[rakesh2293]

proxy.conf.js does not exist.
Please help me out for this issue

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}