Angular配置proxy时bypass函数无视路径拦截所有请求怎么办

这不是Angular代理的Bug，是你对bypass函数的返回值规则理解有误，且逻辑存在疏漏导致的问题。

Angular CLI的代理底层基于http-proxy-middleware实现，路径键（比如你写的/api）的匹配规则是有效的，只有匹配该路径前缀的请求才会走代理转发逻辑，但bypass函数的返回值会直接影响请求的后续流向：

• 返回字符串：将请求重定向到返回的资源路径，不走代理转发
• 返回undefined：跳过当前代理逻辑，将请求交给下一个中间件处理（包括Angular dev-server的静态资源服务，用来加载首页、JS、CSS等静态资源）
• 返回false：直接终止当前请求，返回404响应，不再向下传递

你当前的问题就出在：所有没有匹配/api/posts/的请求（包括首页、静态资源请求），你都返回了false，导致这些请求直接被拦截返回404，自然无法加载页面。你之前修改路径键后依然存在问题，大概率是修改配置后没有重启ng serve进程，代理配置修改后必须重启服务才能生效。

1. 修正代理配置 #

调整bypass函数的逻辑，非目标请求返回undefined而不是false，放行静态资源请求：

const PROXY_CONFIG = {
  '/api': {
    // 如果有真实后端接口地址可以填在这里，没有的话可任意填写不影响本地mock逻辑
    target: 'http://localhost:8080',
    bypass: function (request, response, proxyOptions) {
      // 只处理/api/posts/前缀的接口请求返回本地mock
      if (request.url.startsWith('/api/posts/')) {
        const filename = '/test-data/posts.json';
        console.log(`request redirected: ${request.method} ${request.url} -> ${filename}`);
        return filename;
      }
      // 其他所有请求直接放行，交给后续中间件处理
      return undefined;
    }
  }
}

module.exports = PROXY_CONFIG;

2. 重启开发服务 #

修改完配置后，终止当前运行的ng serve进程，重新执行启动命令：

ng serve --configuration local

修改后的逻辑只会拦截/api/posts/前缀的请求返回本地JSON，其他所有请求都会正常传递，不会影响静态资源加载。

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