简体   繁体   English

http-proxy-middleware:pathFilter 未按预期工作

[英]http-proxy-middleware: pathFilter not working as expected

I am trying so setup a npm-based HTML development environment using two servers.我正在尝试使用两台服务器设置基于 npm 的 HTML 开发环境。 One hosts my HTML app of static files (standard way: http://localhost:8080 ) while the other exposes an application api running locally( http://127.0.0.1:57146/api/someEntity ). One hosts my HTML app of static files (standard way: http://localhost:8080 ) while the other exposes an application api running locally( http://127.0.0.1:57146/api/someEntity ). The latter is beyond my control.后者是我无法控制的。 Calling the api URLs directly from my app brings up CORS issues.直接从我的应用程序调用 api URL 会引发 CORS 问题。 So i want to setup a proxy that redirects my calls from http://localhost:8080/apiBase/someEntity to http://127.0.0.1:57146/api/someEntity ... hoping to avoid the CORS problems that way. So i want to setup a proxy that redirects my calls from http://localhost:8080/apiBase/someEntity to http://127.0.0.1:57146/api/someEntity ... hoping to avoid the CORS problems that way.

I am using lite-server , which builds on top of Browsersync .我正在使用lite-server ,它建立在Browsersync之上。

Since my static app files do not need redirection, they should not be affected by the proxy.由于我的 static 应用程序文件不需要重定向,因此它们不应受到代理的影响。
To specify, which calls are redirected, i am trying to use the "pathFilter" field in the options.要指定重定向哪些调用,我正在尝试使用选项中的“pathFilter”字段。 But i cannot get that functioning.但我无法让它发挥作用。 Instead all calls are always proxied to http://127.0.0.1:57146 .相反,所有调用总是代理到http://127.0.0.1:57146 "pathRewrite" does not seems to work, either. “pathRewrite”似乎也不起作用。 So it seems like i am missing something basic here.所以看起来我在这里缺少一些基本的东西。 What am i doing wrong?我究竟做错了什么?

Here is my config file:这是我的配置文件:

//bs-config.cjs

const { createProxyMiddleware } = require('http-proxy-middleware');

const apiProxy = createProxyMiddleware({
  target: "http://127.0.0.1:57146/",
  pathFilter:"apiBase/",
  pathRewrite: {
    "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 ]      
  }
};

With the help of a (very) patient backend guy, i finally found a solution.在(非常)耐心的后端人员的帮助下,我终于找到了解决方案。 We could not get "pathRewrite" to work, but after getting the filter functioning (by changing some syntax), tweaking the paths ended up in a working setup.我们无法让“pathRewrite”工作,但在过滤器运行后(通过更改一些语法),调整路径最终在工作设置中结束。

//bs-config.cjs

const { createProxyMiddleware } = require('http-proxy-middleware');

const proxy_filter = function (path, req) {
  const regx = new RegExp("/apiBase");
  return path.match(regx);
};

const proxy_options = {
  target: "http://127.0.0.1:57146/api/",
  changeOrigin: true,  
  logger: "console",
  logLevel: "debug"
}

const apiProxy = createProxyMiddleware(proxy_filter, proxy_options);

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM