angular前后端分离代理后端服务器

最新推荐文章于 2024-04-14 10:39:50 发布

原创

最新推荐文章于 2024-04-14 10:39:50 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#angular #前后端分离 #代理

本文介绍了如何在 Angular 开发环境中使用 webpack 的代理功能实现前后端分离，通过创建 proxy.conf.json 文件配置代理，将 API 请求转发到后端服务器。详细讲述了重写 URL 路径、代理多个条目、绕过代理等操作，并讨论了在公司代理环境下如何设置代理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考资料

angular官网

背景

你可以使用 webpack 开发服务器中的代理支持来把特定的 URL 转发给后端服务器，只要传入 --proxy-config 选项就可以了。比如，要把所有到 http://localhost:4200/api 的调用都转给运行在 http://localhost:9999上的服务器，可采取如下步骤。(注意:本方案没有解决会话跨域的问题)

步骤

在项目的根目录下创建一个 proxy.conf.json 文件，紧挨着 package.json。
往这个新的代理配置文件中添加如下内容：

{
  "/api": {
    "target": "http://localhost:9999",
    "secure": false
  }
}

在 CLI 配置文件 angular.json 中为 serve 目标添加 proxyConfig 选项：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",