Angular 开发服务器因 v17->v18 升级而损坏：不重写 <method> <url> 因为客户端更喜欢 JSON，状态为 404

Question

随着 Angular

17.3

->

18.0

升级，本地开发服务器 (

ng serve

) 被破坏了。我们使用它将本地开发实例连接到云中的后端以进行开发。没有配置更改，只有依赖项和不相关的代码级别迁移。

升级后，有些API请求成功，但有些返回了

404

，因此无法再使用本地de服务器。更具体地说，一些请求总是有效，而另一些请求总是失败，并且

404

，而且哪些请求似乎是随机的。例如。

/api/v1/me

和

/api/v1/project?usedIn=false

总是有效，但其他一些像

/api/v1/permissions/<username>

总是失败。 （旁白：它们不是随机的，而是有规律的。）

Answer 1

在 proxy-conf.json 中，我们必须更改路径通配符

{
  "/rest/v1/*": {
    "target": "https://company-fqdn.com:9080/app/api",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {"^/rest" : ""}
  }
}

到

"/rest/v1/**"

，请注意双星号。另外，事后看来，成功的请求在

/rest/v1/

之后仅具有单个路径部分，而未成功的请求则具有多个路径部分，请参阅我原来的示例。

解释以及我发现这一点所采取的步骤：

• ng serve --verbose

  输出有关开发代理功能的详细信息
• 它说成功的请求正在被成功代理，但是对于在浏览器中返回404的请求，日志说

  Not rewriting <method> <url> because the client prefers JSON

  • 一开始这真的很令人困惑，因为它们当然请求 json，因为它们是 API 调用。
  • 但是一些研究表明，这是某些中间件库在通常的 SPA 设置（始终提供

    index.html

    以便客户端路由可以启动）收到带有指定 json 的

    Accept

    标头的请求时发出的错误消息，因此图书馆无法回复

    index.html

• HHHa，这很有趣，但仍然没有那么直接有用。
• 开始研究解析代理配置的库。从https://angular.dev/tools/cli/serve#proxying-to-a-backend-server开始最终查看https://webpack.js.org/configuration/dev-server/#devserverproxy 还有其他一些东西
• ...不知怎的，

  http-proxy-middleware

  也出现了。检查了该文档，多个示例显示了完整通配符的

  **

  语法，而不是单个

  *

  ，后者仅适用于网址的单个部分。更改此解决了问题。
• 查看

  package-lock

  以检查

  http-proxy-middleware

  是否升级，因为它是传递依赖项，事实上，它从

  2.0.6

  到

  3.0.0

  ...这可能是也可能不是导致问题。