Angular 15代理配置中POST/DELETE请求无法同时实现端口转发与路径重写的问题解决

看起来你遇到的问题是connect-history-api-fallback中间件在搞鬼！这个中间件是Angular开发服务器默认启用的，用来处理单页应用的路由跳转，但它只认GET/HEAD方法的请求，对于POST、DELETE这类请求会直接拦截，导致你的API转发流程被打断。

从你贴的日志就能看出来：代理已经正确把/execution/api/v1/login重写成了/api/v1/login，也标记了要转发到http://localhost:8090，但紧接着connect-history-api-fallback就跳出来说“因为不是GET/HEAD方法，所以不处理这个POST请求”，直接把你的请求卡在这里了。

给你几个可行的解决办法：

方法一：给代理配置加个bypass函数，跳过historyApiFallback #

修改你的proxy.conf.json，添加一段bypass逻辑，让API请求直接绕过historyApiFallback的处理，同时记得把changeOrigin改成true（跨端口转发时这个设置很关键）：

{
  "/execution/api/v1/": {
    "target": "http://localhost:8090",
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/execution": ""
    },
    "bypass": function(req, res, proxyOptions) {
      // 判断请求不是要加载HTML页面的话，就交给代理处理，跳过historyApiFallback
      if (req.headers.accept && req.headers.accept.indexOf('text/html') === -1) {
        return null;
      }
    }
  }
}

方法二：调整开发服务器的historyApiFallback规则 #

在angular.json里找到你项目的serve配置，给historyApiFallback加个重写规则，让/api/v1/开头的请求直接保留原路径，不被转到index.html：

"projects": {
  "你的项目名称": {
    "architect": {
      "serve": {
        "options": {
          "proxyConfig": "proxy.conf.json",
          "devServer": {
            "historyApiFallback": {
              "rewrites": [
                {
                  "from": "^/api/v1/(.*)$",
                  "to": "/api/v1/$1"
                }
              ]
            }
          }
        }
      }
    }
  }
}

方法三：优化代理的路径匹配模式 #

把代理的路径匹配改成更精确的正则模式，减少和Angular路由的冲突：

{
  "^/execution/api/v1/*": {
    "target": "http://localhost:8090",
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/execution": ""
    }
  }
}

另外提一句：你之前配置里的target地址有个拼写错误（locahost应该是localhost），虽然日志里显示的是正确的，但建议修正下避免后续踩坑。

备注：内容来源于stack exchange，提问作者JLS