Ionic/Angular应用无法从MongoDB数据库获取数据 接口返回404错误

你遇到的404错误和Ionic框架本身无关，核心原因是本地开发时，Ionic前端服务和Express后端服务运行在不同端口：

• Ionic默认开发服务端口为8100/4200
• 你的Express后端服务端口为3000

你在前端代码中使用相对路径/api/expenses发起请求时，请求会被默认发送到当前前端服务的端口（如http://localhost:8100/api/expenses），而该端口下并没有对应的API接口，因此返回404。

方案一：使用Angular代理配置（推荐本地开发用） #

该方案无需修改业务代码，仅在本地开发阶段生效，打包后自动适配生产环境路径。

1. 在Ionic项目根目录新建proxy.conf.json文件，写入以下配置：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

2. 打开项目根目录的angular.json文件，找到projects -> [你的项目名] -> architect -> serve -> options节点，添加配置项：

"proxyConfig": "proxy.conf.json"

3. 重启Ionic开发服务，后续所有/api开头的请求都会自动代理到3000端口的后端服务。

方案二：补全请求完整路径 #

直接修改前端请求地址为后端服务的完整路径，同时需要配置后端CORS支持跨域请求。

1. 修改expense.service.ts中的请求代码：

findAllExpenses(): Observable<any>{
  // 本地开发用地址，生产环境需要替换为实际部署的后端域名
  return this.http.get('http://localhost:3000/api/expenses');
}

2. 后端安装CORS依赖解决跨域问题：

npm install cors

3. 在app.js中启用CORS：

const cors = require('cors');
// 放在所有路由配置之前
app.use(cors());

当你将Ionic项目打包后的静态文件放到Express的www目录下运行时，前后端共享3000端口，使用相对路径/api/expenses可以正常请求，无需额外配置。

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