Angular跨端口调用Node.js接口返回404 Not Found如何解决？

你当前请求的接口地址默认拼接了Angular前端运行的4200端口，而实际后端服务运行在3000端口，自然找不到对应接口，所以抛出404错误。

第一步：验证后端接口可用性 #

先确认后端接口的完整可访问路径，你后端路由如果是挂载在/api/code前缀下，那么完整接口地址应为http://localhost:3000/api/code/codes，直接在浏览器地址栏输入该地址，如果能正常返回数据，说明后端接口本身没有问题。

第二步：修复前端请求路径/转发规则，有两种可选方案： #

方案1：直接修改请求地址（适合快速调试） #

• 先在后端配置CORS允许跨域访问：如果你的后端用的是Express框架，直接安装cors依赖，然后在入口文件添加app.use(cors())即可放行4200端口的跨域请求。
• 修改CodeService里的请求路径为完整的后端地址：

findAllCodes() {
  return this.http.get('http://localhost:3000/api/code/codes/');
}

方案2：配置Angular代理转发（推荐开发环境使用） #

不需要修改请求地址、也不需要配置CORS，利用Angular开发服务的代理能力转发请求：

1. 在Angular项目根目录新建proxy.conf.json文件，写入以下内容：

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

2. 修改项目package.json中的启动命令，将ng serve修改为：

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

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

• HomeComponent的请求成功回调中没有给code数组赋值，需要添加this.code = res，否则后续打印和渲染都拿不到数据。
• 后端接口定义中加了async关键字但内部使用的是回调写法没有用到await，可以删掉async避免多余的异步上下文问题。

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