Why does my angular-cli proxy keep returning index.html

Question

Requests made to /api/v1/anything are just returning index.html. This is because the app returns index.html on 404.

Anything requests made to /api/ are supposed to be proxied to http://localhost:5000 But this does not seem to be happening.

I see no actual requests being made on the server. The server works perfectly when I hit it directly

I have tried changing the proxy.conf.json to:

  "/api/*": {
    "target": "http://localhost:5000",
    "secure": false,
    "logLevel": "debug"
  }

and

  "/api": {
    "target": "http://localhost:5000",
    "secure": false,
    "logLevel": "debug"
  }

I have tried rewriting the URLs. etc etc

proxy.conf.json:

{
  "/api/*": {
    "target": "http://localhost:5000",
    "secure": false,
    "logLevel": "debug"
  }
}

angular.json:

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mean-contactlist-angular2:build",
            "proxyConfig": "src/proxy.conf.json"
          },

When calling I do ng serve

I have also tried running it directly using ng serve --proxy-conf src/proxy.conf.json

The server is running on localhost:5000 and working fine with postman

I am running Angular-CLI 8.2.0 Node 10.16.0 Windows 10 Angular 9.0.0-next.0

I expect that I get json back from the /api/v1/project endpoint but the browser does not hit the back end and angular catches the 404 and returns index.html instead

Startup output:

PS C:\Users\james\OneDrive\Documents\gitprojects\screenscene_webapp> ng serve
 10% building 4/4 modules 0 active[HPM] Proxy created: /api  ->  http://localhost:5000
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
i ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.htmlchunk {main} main.js, main.js.map (main) 2.13 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 284 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 392 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 181 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 8.73 MB [initial] [rendered]
Date: 2019-08-01T13:12:11.947Z - Hash: ca4ffce8bf3ec707bb58 - Time: 63765ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Compiled successfully.

If I put directly into the browser: http://localhost/api/v1/project

I see in the console of the cli:

HPM] GET /api/v1/project -> http://localhost:5000

This is what the corresponding request looks like in chrome:

Request URL: http://localhost:4200/api/v1/project
Request Method: GET
Status Code: 200 OK (from disk cache)
Remote Address: 127.0.0.1:4200
Referrer Policy: no-referrer-when-downgrade

If you can reach it with postman, that there must be something with your requests. Please post them. — liqSTAR
You maybe need something like a path rewrite, looks like your /api/* is just replaced with http://localhost:5000 without additional path - so you get the index file. Haven't done any proxy config tho.Something like this? — Fussel
@Fussel I did try that.. but actually that fix is to remove the /api from the request.. ie turn /api/something into /something — user3857677

user3857677 user3857677 · Accepted Answer · 2019-08-07T11:59:29

I resolved this - I had installed some software from my courier company on my computer that was needed to print labels. It is using port 5000 as a web server. Who knows why they need to run a web server on my computer to print labels?! :/ Changing my application to port 3000 worked.

Why does my angular-cli proxy keep returning index.html

1 Answers