Angular with https-proxy-agent only works with trailing /

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.

CodePudding user response：

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.