Angular with https-proxy-agent only works with trailing / - what am I missing?

Question

I created an Angular project with ngx-rocket.

• Angular frontend running at localhost:4200
• Backend serving an api at locahlost:8000

I use the preconfigured https-proxy-agent with ngx-rocket to redirect my api requests from my frontend to my backend. I used to have my api endpoints localhost:8000/api/endpoint and that used to work, but now switched the backend to listen at localhost:8000/endpoint. I adapted the proxy to reflect those changes but for some reasons now it only works if I request localhost:4200/endpoint/ with the trailing slash, whereas before it did not.

I could just change the endpoints in my frontend, but I'd much rather understand what is happening and fix the underlying issue.

proxy.conf.js

const proxyConfig = [
  {
    context: '/api/*',
    pathRewrite: { '^/api': '' },
    target: 'http://localhost:8000/',
    changeOrigin: true,
    secure: false,
    logLevel: 'debug'
  }
];

environment.ts

export const environment = {
  production: false,
  version: env.npm_package_version + '-dev',
  serverUrl: '/api/',
  defaultLanguage: 'de-DE',
  supportedLanguages: ['de-DE', 'en-US'],
};

Example service:

  private endpointUrl = 'endpoint';


  getEndpointList(): Observable<Endpoint[]> {
    return this.http
      .get<ApiResponse<Endpoint>>(this.endpointUrl)
  };

This endpoint does not work, but it used to work with the old configuration. If I change it to private endpointUrl = 'endpoint/'; it happens to work.

Current behaviour:

Requesting http://localhost:4200/api/endpoint

• No proxy log in angular console

Network (Chrome dev tools):

• Status code: 301
• location: /endpoint/
• Resulting request: http://localhost:4200/endpoint/

Requesting http://localhost:4200/api/endpoint/

• [HPM] Rewriting path from "/api/endpoint/" to "/endpoint/"
• [HPM] GET /api/endpoint/ ~> http://localhost:8000/

Network (Chrome dev tools):

• Status code: 200
• location: /endpoint/
• Returns the api response

Expected behaviour:

The api request should work without the trailing slash. I am afraid this is something dumb, but I am unable to figure it out currently so any help would be greatly appreaciated.

Answer 1

I solved it now.

I used django with Django REST framework as the backend, which uses urls with a trailing slash as the default. When I opened the page in the browser it worked without a slash as well, because I was automatically forwarded. That forward did not work over the proxy because the response sent from localhost:8000 has the location set to /endpoint/ which always resulted in the localhost:4200.

I fixed it by removing the trailing slash in the urls.py:

router = routers.DefaultRouter(trailing_slash=False)

In addition I had to deleted my browser data for some reason.