http-proxy-middleware pathFilter未按预期工作，如何配置代理解决CORS？

你的配置问题主要出在代理路径匹配规则和http-proxy-middleware参数用法上，具体错误和修正如下：

错误点说明 #

1. 错误使用pathFilter参数：http-proxy-middleware中pathFilter并非简单字符串匹配，且你未指定仅匹配/apiBase开头的请求，导致所有请求都被转发到API服务器。
2. pathRewrite规则不严谨：直接用"apiBase/": "api/"会导致部分路径匹配异常，需要用正则精准匹配开头的路径前缀。
3. 缺少changeOrigin配置：目标API服务器可能会校验请求的Host头，不设置changeOrigin: true可能导致请求被拒绝。

修正后的配置文件 #

//bs-config.cjs
const { createProxyMiddleware } = require('http-proxy-middleware');

// 第一个参数指定仅代理以/apiBase开头的所有请求
const apiProxy = createProxyMiddleware('/apiBase/**', {
  target: "http://127.0.0.1:57146/",
  changeOrigin: true, // 修正Host头，适配目标服务器的校验
  pathRewrite: {
    '^/apiBase/': '/api/' // 正则匹配开头的/apiBase/，替换为/api/
  },
  logger: "console",
  logLevel: "debug"
});

module.exports = {
  port: 8080,
  index: "parent.htm",
  startPath: "parent.htm",
  cors: true,
  server: {
    baseDir: "./dist",
    index: "parent.htm",
    cors: true,
    middleware: [ apiProxy ]      
  }
};

修正逻辑解释 #

• 路径匹配：通过/apiBase/**作为createProxyMiddleware的第一个参数，明确只有以/apiBase开头的请求才会进入代理流程，静态文件请求仍由lite-server正常处理。
• 路径重写：使用^/apiBase/正则确保仅替换路径开头的前缀，比如/apiBase/someEntity会被正确转发到http://127.0.0.1:57146/api/someEntity。
• 跨域适配：changeOrigin: true会将请求的Host头修改为目标API服务器的地址，避免因Host不匹配导致的请求失败。

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