Question

有太多第三方的东西正在发生，我甚至不知道如何准确地说出这个问题，但让我试着解释一下我想做什么：

我的webapp是一个react / redux / react-router / redux-router / webpack webapp，我使用快速服务器来解决直接从客户端到另一个域上的服务器的CORS问题。

Express在端口3000上运行，webpack dev服务器在端口8080上运行

这是我的快速设置（因为我知道它太复杂了，但是在做webdev时有很多库可以学习，有时你只需要工作而不是花3天时间调查每个lib）：

  app.use(express.static(path.join(__dirname, '/dist/')));

  var proxyRules = new HttpProxyRules({
      rules: {
        '.*/broker': 'https://SomeDomain.com/broker/', 
        '.*/api': 'https://api.AnotherDomain.com/'
      }
    });



  var bundle = require('./bundle.js');
  bundle();

  var proxy = httpProxy.createProxyServer();

  proxy.on('error', function(e) {

  });

  // Any requests to localhost:3000/dist is proxied
  // to webpack-dev-server
  app.get('/bundle.js', function (req, res) {
    proxy.web(req, res, {
        target: 'http://localhost:8080/dist',
        changeOrigin:true
    });
  });


  app.all('/dist/*', function (req, res) {
    proxy.web(req, res, {
        target: 'http://localhost:8080',
        changeOrigin:true
    });
  });

  app.get('/img/:name', function(request, response){
    const name = request.params.name
    response.sendFile(path.join(__dirname, '/../dist/img/' + name));
  });

  app.get('/css/fonts/:name', function(request, response){
    const name = request.params.name
    response.sendFile(path.join(__dirname, '/../dist/css/fonts/' + name));
  });

  app.get('/css/:name', function(request, response){
    const name = request.params.name
    response.sendFile(path.join(__dirname, '/../dist/css/' + name));
  });


  app.all('*', function(req, res) {
     var target = proxyRules.match(req);
    if (target) {
       return proxy.web(req, res, {
         target: target
      });
    } else {
      res.sendFile(path.join(__dirname, '/../dist/index.html'));
    }
 })

简而言之：webpack编译到dist文件夹。我将我的静态资产（图片等）复制到dist/img，dist/css等。

现在我在上面的配置中设置了一堆规则：

当它寻找静态资产时，它会返回那些（img，css，font）
如果网址与代理中的规则匹配，则代理网址以执行没有CORS问题的服务器 - 服务器请求
如果它要求webpack生成的bundle.js文件，则返回该文件
所有localhost:3000/dist次调用都重新映射到运行webpack dev服务器的端口8080
所有剩余的东西（*）返回index.html

现在的问题是确保反应路由正常工作（它们使用url中的相对路径）。

在当前配置中，如果我打开http://localhost:3000/dashboard或http://localhost:3000/location等网址，它会完美运行，但如果我尝试使用样式http://localhost:3000/dashboard/profile/user5的网址，它似乎会回归到想要返回{* 1}}

的*规则

如何解决此问题，以便将完整路径传递到客户端路由器？

这是客户端配置

index.html

如果您对Express的常规设置有任何意见，我很满意。还在学习如何使用这一切，所以我确信这远非最佳配置。

谢谢！

Answer 1

快递路线将按照您创建的顺序进行匹配，最终会回到最后一次“全部捕捉”路线（app.all('*')）。

由于你还没有为/dashboard/profile/user5这样的路线写过任何匹配，所以它基本上就像你所要求的那样，并且默认为全能路线。

如果您想轻松处理这些问题，可以创建一个包含子级的顶级路由列表，并相应地匹配这些路由：

    var routesWithChildren = [
      '/dashboard',
      '/locations'
    ];

    routesWithChildren.forEach(function (rootPath) {
        app.get(rootPath + '/*', function (req, res) {
          // Send or render whatever is appropriate here
          // You can use req.path to get the path that was requested
          // Eg: /dashboard/profile/user5
        });
    });

快递，如何通过长URL路径来响应路由器？

1 个答案: