使用http-proxy-middleware代理Flower时Datatables Ajax请求404求助

编辑补充 #

我已通过如下https_server.js配置修复了下文提到的CSS报错问题：

function flowerGetMethods(app, endpoint, certified) {
    if (certified) {
      var options = {
          logLevel: 'debug',
          target: 'http://'+"flower:5555", // target host
          changeOrigin: true, // needed for virtual hosted sites
          ws: true,
          port: 5555,
          pathRewrite: {},
      };
      var flowerProxy = createProxyMiddleware(options);
    }

同时修改了docker-compose.yaml配置：

flower:
    container_name: flower
    image: mher/flower
    hostname: "flower"
    command: ["celery", "flower", "--url_prefix=flower"]
    ports:
      - 5555
    expose:
      - 5555

但我仍然遇到如下问题：
访问localhost/flower/tasks时会弹出提示：
DataTables warning: table id=tasks-table - Ajax error. For more information about this error, please see http://datatables.net/tn/7
经排查该报错是因为POST请求http://localhost/flower/tasks/datatable时返回404，我不清楚该资源找不到的原因，恳请大家提供帮助！

原始提问 #

我想使用http-proxy-middleware代理Flower服务，但出现了CSS无法加载、页面链接无法正常跳转的问题，页面显示效果如下：

同时收到如下报错：

Error http://localhost/static/css/flower.css?v=83ad...[not found]

点击页面链接会直接导致页面报错，比如点击「Dashboard」时会跳转至http://localhost/dashboard并提示找不到资源。
我预期的效果是点击链接后跳转至http://localhost/flower/dashboard，CSS等静态资源请求路径为http://localhost/flower/static/css/flower.css?...。以下是所有相关代码，Flower实例和Web服务都运行在Docker容器中。

HTTP服务代码如下：

var async = require('async');
const express = require('express')
var app = express()
const port = 80

var helmet = require('helmet');

const { createProxyMiddleware } = require('http-proxy-middleware');
/* redirect to flower */
function flowerGetMethods(app, endpoint, certified) {
    if (certified) {
      var options = {
          logLevel: 'debug',
          target: 'http://'+"flower:5555", // target host
          changeOrigin: true, // needed for virtual hosted sites
          ws: true,
          pathRewrite: {},
          port: 5555,
      };
      options.pathRewrite['^'+endpoint+'/flower'] = ''; // remove path
      var flowerProxy = createProxyMiddleware(options);
    }

    app.get(endpoint+'/flower*', function(req, res, next) {
      flowerProxy(req, res, next);
    });
}

async.waterfall([
  function(next) {
    app.use(
       helmet({
         contentSecurityPolicy: false,
         noSniff: false,
       })
     );
    var protocol = require('http').createServer(app);

    protocol.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`)
      });

      app.get('/', (req, res) => {
        res.send('Hello World!')
      });
      flowerGetMethods(app, '', true);
    }
]);

该服务的Dockerfile如下：

FROM node:10.24-alpine

# Install openssl
RUN apk add --update openssl ca-certificates

# Create app directory
RUN mkdir -p /node-servers

# Setting the working directory
WORKDIR /node-servers

# Install app dependencies
COPY package.json /node-servers/
RUN npm install
# if building for production
#RUN npm ci --only=production

# Copy everything
COPY ./ /node-servers

# Entrypoint used to load the environment and start the node server
ENTRYPOINT [ "node", "https_server.js" ]

我使用如下docker-compose配置启动服务和Flower容器：

version: '3'
services:
  https-server:
    container_name: https-server
    build: ./node-servers
    ports:
      - 80:80
    expose:
      - "80"
    depends_on:
      - flower

  flower:
    container_name: flower
    image: mher/flower 
    ports:
      - 5555

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