如何通过proxy.conf.json直接向Angular应用返回JSON数据？

嘿，这个问题我刚好碰到过！纯JSON格式的proxy.conf.json确实没法直接返回自定义JSON，因为它的核心定位就是请求转发工具。不过我们可以换用JavaScript版的代理配置文件来实现这个需求，操作起来也挺简单的～

具体实现步骤 #

1. 创建JavaScript代理配置文件 #

把原来的proxy.conf.json重命名为proxy.conf.js（或者直接在src目录下新建这个文件），然后写入自定义的拦截逻辑。这里我们用bypass函数来拦截指定接口，直接返回Mock数据：

// 定义需要Mock的接口和对应JSON数据
const mockData = {
  '/api/user': {
    id: 1,
    name: 'Mock User',
    email: 'mock@example.com',
    roles: ['admin', 'user']
  },
  '/api/dashboard/stats': {
    totalUsers: 1200,
    activeToday: 340,
    revenue: 4567.89
  }
};

module.exports = {
  '/api': {
    // 这里随便填一个目标地址就行，因为我们会拦截请求跳过转发
    target: 'http://localhost:3000',
    changeOrigin: true,
    bypass: function(req, res, proxyOptions) {
      // 检查当前请求路径是否在Mock列表中
      if (mockData[req.path]) {
        // 设置响应头为JSON类型
        res.setHeader('Content-Type', 'application/json');
        // 返回预定义的Mock JSON数据
        res.end(JSON.stringify(mockData[req.path]));
        // 返回true表示跳过代理转发流程
        return true;
      }
      // 如果不在Mock列表里，继续走原代理转发逻辑（可选，适合部分接口Mock、部分转发的场景）
      return false;
    }
  }
};

2. 修改Angular配置文件 #

打开angular.json，找到serve选项下的proxyConfig，把路径改成我们刚创建的proxy.conf.js：

"projects": {
  "your-app-name": {
    "architect": {
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": "your-app-name:build",
          "proxyConfig": "src/proxy.conf.js" // 改成JS文件路径
        },
        ...
      }
    }
  }
}

3. 启动Angular服务 #

重启你的Angular开发服务（ng serve），现在访问/api/user或者/api/dashboard/stats时，就会直接返回我们定义的Mock JSON，完全不需要启动后端服务啦！

进阶优化：拆分Mock数据文件 #

如果Mock数据比较多，直接写在proxy.conf.js里会显得杂乱。可以把每个接口的Mock数据单独放在JSON文件中，比如在src下创建mocks文件夹：

• src/mocks/user.json

{
  "id": 1,
  "name": "Mock User",
  "email": "mock@example.com",
  "roles": ["admin", "user"]
}

• src/mocks/dashboard-stats.json

{
  "totalUsers": 1200,
  "activeToday": 340,
  "revenue": 4567.89
}

然后在proxy.conf.js中导入这些文件：

const userMock = require('./src/mocks/user.json');
const dashboardStatsMock = require('./src/mocks/dashboard-stats.json');

const mockData = {
  '/api/user': userMock,
  '/api/dashboard/stats': dashboardStatsMock
};

module.exports = {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    bypass: function(req, res, proxyOptions) {
      if (mockData[req.path]) {
        res.setHeader('Content-Type', 'application/json');
        res.end(JSON.stringify(mockData[req.path]));
        return true;
      }
      return false;
    }
  }
};

这样管理Mock数据会更清晰，也方便后续修改。

内容的提问来源于stack exchange，提问作者CodyBugstein