0

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

  • 在 localhost:4200 运行的 Angular 前端
  • 后端在 locahlost:8000 提供 api

我使用预配置的 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'
  }
];

环境.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

  • 角度控制台中没有代理登录

网络（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/
  • 返回 api 响应

预期行为：

api 请求应该在没有斜杠的情况下工作。恐怕这是愚蠢的，但我目前无法弄清楚，所以任何帮助都会非常感激。

4

1 回答 1

0

我现在解决了。

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

我通过删除 urls.py 中的尾部斜杠来修复它：

router = routers.DefaultRouter(trailing_slash=False)

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

于 2021-12-11T21:11:33.680 回答