AngularJS/JSP项目迁移至Angular 2+的代理配置咨询

我帮你梳理下这个代理API请求异常的可能原因和解决办法，毕竟从老项目迁移时代理配置经常踩这些坑：

1. 路径重写缺失导致后端找不到接口 #

你当前的代理配置只是把/legacy开头的请求转发到目标主机，但如果后端的API实际路径是/api/data（不带/legacy前缀），那代理转发过去的请求就变成了https://localhost:8111/legacy/api/data，后端自然找不到对应的接口。

解决办法是加上pathRewrite配置，把请求里的/legacy前缀去掉：

{
  "/legacy": {
    "target": "https://localhost:8111",
    "secure": false,
    "changeOrigin": false,
    "logLevel": "debug",
    "pathRewrite": {"^/legacy": ""}
  }
}

这样请求/legacy/api/data时，代理会转发成https://localhost:8111/api/data，和后端的接口路径匹配。

2. Host头不匹配导致后端拒绝请求 #

你现在设置的changeOrigin: false，如果目标主机的服务器依赖Host头做路由或权限验证，就会出问题。比如后端期望的Host是localhost:8111，但代理转发时还是带着Angular开发服务器的Host（比如localhost:4200），后端可能会拒绝这个请求。

试试把changeOrigin改成true，它会自动把请求的Host头替换成目标主机的地址：

{
  "/legacy": {
    "target": "https://localhost:8111",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

3. 会话/Cookie未转发导致API认证失败 #

老项目的JSP页面通常依赖会话Cookie做身份验证，当你访问/legacy/index.jsp时，浏览器已经拿到了会话Cookie，但API请求时如果代理没转发这些Cookie，后端会认为你未登录，返回异常。

可以加上withCredentials: true配置，让代理转发请求时带上Cookie：

{
  "/legacy": {
    "target": "https://localhost:8111",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {"^/legacy": ""},
    "withCredentials": true
  }
}

同时也要检查浏览器Network面板里，/legacy/api/data请求是否携带了正确的Cookie。

4. 优先通过debug日志定位问题 #

因为你已经开了logLevel: debug，启动Angular项目的终端会输出代理的详细日志，比如：

[HPM] GET /legacy/api/data -> https://localhost:8111

从日志里你能看到转发后的完整路径、请求方法、头信息，甚至错误提示，这是最快定位问题的方式。比如如果日志显示转发路径是https://localhost:8111/legacy/api/data，那肯定是路径重写的问题。

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