Angular 4仅OPTIONS请求触发，HTTP调用未执行且报404错误求助

我来帮你捋捋这个问题——你遇到的核心问题是Angular开发环境的代理配置在Express生产部署时不生效！毕竟proxy.conf.json那套配置只对ng serve启动的开发服务器有用，当你用Express托管Angular静态文件时，得靠Express自己来做反向代理才行。

下面是一步步的解决方案：

1. 给Express配置反向代理 #

首先得安装Express的代理中间件http-proxy-middleware，它能帮我们把前端请求转发到后端的8085端口：

• 先安装依赖：

  npm install http-proxy-middleware --save
  

• 然后修改你的Express入口文件（比如server.js），添加代理配置：

  const express = require('express');
  const { createProxyMiddleware } = require('http-proxy-middleware');
  const app = express();
  
  // 关键：配置代理规则
  // 把所有以/api开头的请求转发到8085端口的后端服务
  app.use('/api', createProxyMiddleware({
    target: 'http://localhost:8085',
    changeOrigin: true, // 必须开启，否则后端可能识别不到正确的请求来源
    pathRewrite: { '^/api': '' } // 如果后端接口不带/api前缀，就把这个前缀去掉
  }));
  
  // 托管Angular打包后的静态文件
  app.use(express.static('./dist/你的Angular项目名称'));
  
  // 处理SPA路由问题：刷新页面不会404
  app.get('*', (req, res) => {
    res.sendFile(`${__dirname}/dist/你的Angular项目名称/index.html`);
  });
  
  // 启动Express服务，监听4200端口
  app.listen(4200, () => {
    console.log('Express服务器已启动，端口：4200');
  });
  

2. 调整Angular的HTTP请求路径 #

确保你的Angular服务里用相对路径发起请求，而不是硬编码地址：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private http: HttpClient) {}

  login(credentials: { username: string; password: string }) {
    // 用相对路径，让Express代理转发到8085
    return this.http.post('/api/login', credentials);
  }
}

3. 打包并部署Angular应用 #

先打包你的Angular项目：

ng build --prod # Angular 12+也可以直接用ng build，默认是生产模式

打包完成后，把dist文件夹里的所有内容放到Express项目的对应目录下（就是上面代码里./dist/你的Angular项目名称指向的路径）。

4. 排查验证 #

• 启动Express服务器后，用Postman测试http://localhost:4200/api/login，看是否能正常返回后端的响应，如果可以，说明代理配置没问题；
• 如果还是404，检查后端服务是否确实在8085端口运行，Windows防火墙有没有拦截这两个端口；
• 查看Express的控制台日志，确认请求是否进入了代理中间件，是不是路径匹配规则写错了。

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