自定义 ng serve 以代理对 /api 的调用？

Posted 2023-02-16

【中文标题】自定义 ng serve 以代理对 /api 的调用？

【英文标题】：Customise ng serve to proxy calls to /api?

【发布时间】：2017-07-02 08:05:21

【问题描述】：

我使用 ng CLI 创建了一个新应用程序，它的工作原理非常棒： ng new babysteps cd babysteps ng serve ng serve 使用 webpack 组装应用程序。为了对其进行全面测试，我需要从我的 API 模拟服务器（特别是 POST 请求）提供/api...。如何自定义使用的 Web 服务器以重定向该 URL 模式？

Webpack 开发服务器有 a proxy setting，但似乎（？）ng serve 没有配置文件（或者我没有得到）。

我需要创建一个webpack.config.js 或创建/编辑其他文件来代理吗？

【问题讨论】：

我相信您要求的是代理配置。看看this part of the Angular-CLI documentation。

【参考方案1】：

您确实可以使用带有 --proxy-config 标志的 angular cli 将代理设置为后端。

这里或多或少是来自documentation 的复制粘贴：

假设我们有一个在http://localhost:3000/api 上运行的服务器，我们想要 所有对 http://localhost:4200/api 的调用都转到该服务器。

我们在项目package.json 旁边创建一个名为proxy.conf.json 的文件 与内容

    "/api":
    
        "target": "http://localhost:3000",
        "secure": false
     

[...]

然后我们将package.json文件的启动脚本编辑为

"start": "ng serve --proxy-config proxy.conf.json"

并使用npm start 运行它

【讨论】：

或者如果你正在运行一个 express 后端和 webpack 构建，同时运行后端与 watch，前端与 ng serve... "dev": "concurrently \"ng serve --proxy -config proxy.conf.json\" \"webpack --watch\" \"nodemon dist/server/app.bundle.js\""

@@Michael Dausmann@@ 非常感谢。在过去的几天里，我一直在努力设置它。很好的提示。

@MichaelDausmann 我一直在尝试查看如何使用代理配置来查看文件。我想你回答了我一直在寻找的东西，但是我不明白你的评论:(。有这方面的任何文件吗？

@JoshuaJLIVEWilliams 并发（npmjs.com/package/concurrently)is 曾经一次运行 2 件事。第一位是根据接受的答案，第二位来自 webpack (webpack.js.org/configuration/watch)

对于从 Azure 提供的 api，需要 "changeOrigin":true。见github.com/webpack/webpack-dev-server/issues/…