如何将Express.js RESTful API集成到Angular5/6项目并发起请求？

别担心，新手碰到前后端集成的问题太正常了！我帮你一步步理清楚怎么搞定：

第一步：先搞懂两个项目的运行逻辑 #

首先得明确：Express是后端服务，Angular是前端项目，它们是两个独立的服务，需要分别启动，不是把Express“塞进”Angular项目里运行。你之前可能误解了“集成”的意思——不是合并代码，而是让它们能互相通信。

第二步：先确保你的Express API本身能正常跑起来 #

先不管Angular，单独验证Express没问题：

• 打开终端，进入你的Express项目根目录
• 运行启动命令，比如 npm start 或者 node server.js（具体看你package.json里的scripts配置）
• 打开Postman，尝试请求你的API接口，比如 http://localhost:3000/api/xxx（假设你的Express服务跑在3000端口）
  • 如果这一步Postman都请求失败，先解决Express的问题：检查端口是否被占用、路由配置有没有写错、body-parser这类必要中间件是否添加、服务启动时终端有没有报错（比如依赖没装全就运行npm install补一下）

第三步：让Angular能正常访问Express API（解决跨域问题） #

Angular默认跑在4200端口，直接请求3000端口的Express会触发浏览器的跨域限制，这里给你两个常用解决方案：

方案一：在Express里配置CORS中间件（最推荐） #

• 先在Express项目里安装cors包：npm install cors --save
• 在你的Express入口文件（比如server.js/app.js）里添加代码：

  const cors = require('cors');
  // 全局启用CORS，允许所有源访问（开发环境用很方便）
  app.use(cors());
  // 如果要更安全，也可以指定只允许Angular的源访问
  // app.use(cors({ origin: 'http://localhost:4200' }));
  

• 重启Express服务，这样Angular就能从4200端口请求3000端口的API了

方案二：用Angular的代理转发（适合开发环境） #

如果不想修改Express代码，可以用Angular自带的代理功能：

• 在Angular项目根目录创建 proxy.conf.json 文件，内容如下：

  {
    "/api/*": {
      "target": "http://localhost:3000",
      "secure": false,
      "logLevel": "debug"
    }
  }
  

• 修改Angular项目package.json里的启动命令：

  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  }
  

• 这样Angular启动后，所有 /api 开头的请求都会自动转发到 http://localhost:3000/api，你在Angular里写请求的时候直接用 /api/xxx 就行，不用写完整域名

第四步：同时启动两个服务 #

现在你需要开两个终端分别启动服务：

• 第一个终端：进入Express项目，运行启动命令（比如 npm start）
• 第二个终端：进入Angular项目，运行 npm start（或者你配置后的启动命令）
• 这时候Postman可以直接请求Express的端口（比如3000），Angular也能通过上面的方式正常调用API了

常见坑点排查 #

• 端口冲突：确保Express和Angular用不同端口（默认3000和4200，一般不会冲突，但如果改了端口要注意）
• Express服务没启动：看终端报错信息，比如有没有模块缺失、语法错误
• Angular请求路径错误：用代理的话，请求路径要写 /api/xxx 而不是完整的 http://localhost:3000/api/xxx
• CORS配置错误：如果用了cors中间件，检查代码有没有写错，先试试全局启用CORS测试

按这个步骤走，应该就能解决你的问题啦！

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