Angular with https-proxy-agent 仅适用于尾随 / - 我错过了什么？

Question

我用 ngx-rocket 创建了一个 Angular 项目。

Angular 前端运行在 localhost:4200
后端服务 api locahlost:8000

我使用预配置的 https-proxy-agent 和 ngx-rocket 将我的 api 请求从我的前端重定向到我的后端。我曾经有我的 api 端点 localhost:8000/api/endpoint 并且曾经工作，但现在切换后端以在 localhost:8000/endpoint 上监听。我调整了代理以反映这些更改，但由于某些原因现在它只在我请求 localhost:4200/endpoint/ 时才有效，而在它之前没有。

我可以只更改前端的端点，但我更愿意了解正在发生的事情并解决根本问题。

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'],
};

示例服务：

  private endpointUrl = 'endpoint';


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

这个端点不工作，但它曾经与旧配置一起工作。如果我将它更改为 private endpointUrl = 'endpoint/'; 它恰好可以工作。

当前行为：

请求http://localhost:4200/api/endpoint

没有代理登录angular控制台

网络（Chrome 开发工具）：

状态码：301
位置：/endpoint/
生成的请求：http://localhost:4200/endpoint/

请求http://localhost:4200/api/endpoint/

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

网络（Chrome 开发工具）：

状态码：200
位置：/endpoint/
Returns api 响应

预期行为：

api 请求应该在没有尾部斜线的情况下工作。恐怕这是愚蠢的事情，但我目前无法弄清楚，因此将不胜感激任何帮助。

Answer 1

我现在解决了。

我使用带有 Django REST 框架的 django 作为后端，它使用带有尾部斜杠的 url 作为默认值。当我在浏览器中打开页面时，它也没有斜线，因为我被自动转发了。该转发在代理上不起作用，因为从 localhost:8000 发送的响应将位置设置为 /endpoint/，这总是导致 localhost:4200.

我通过删除 urls.py:

中的尾部斜线修复了它

router = routers.DefaultRouter(trailing_slash=False)

此外，出于某种原因我不得不删除我的浏览器数据。

Angular with https-proxy-agent 仅适用于尾随 / - 我错过了什么？

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

api

django

proxy

angular

https-proxy-agent

当前行为：

预期行为：