Browser-sync&lite-server: http-proxy-middleware 拦截不存在的url

Question

我在 angular2 应用程序中有以下路由：

/** Application routes */
const routes: Routes = [
    { path: '', component: LandingComponent },
    { path: 'about', component: AboutUsComponent },    
    // catch all path, should go after all defined paths
    { path: '**', component: PageNotFoundComponent }
];

最近不得不添加bs-config.js，内容如下：

var proxy = require('http-proxy-middleware');

// note: serving from both ./dist and ./node_modules
// TODO: https?

// redirect all /api calls to the backend
var apiProxy = proxy('/api', {
    target: 'http://localhost:8080',
    pathRewrite: {
        '^/api' : '',    // rewrite path 
    },
    changeOrigin: true  // for vhosted sites
});

module.exports = {
    files : "./dist/**/*.{js, html, css}",
    server: {
        baseDir : ["./dist","node_modules"],
        middleware: {
            1: apiProxy
        },
        https : false
    },
    logLevel: "debug"
};

一切正常，除了访问 404 页面，即如果用户输入错误 link 我只看到 "Cannot GET /url" 而日志中没有任何有趣的内容。如果我只删除这三行：

        middleware: {
            1: apiProxy
        },

它又开始工作了，我在 http://myapp/some/broken/url 上看到 404 页面。

但我需要后端相关内容的代理。为什么它会干扰常规 api 路径，即使它应该只代理 'api' 像 urls？

P.s。我正在使用：

"http-proxy-middleware": "^0.17.2",
"lite-server": "^2.2.2",

Answer 1

通过更改为以某种方式修复了它：

    middleware: {
        1: apiProxy,
        2: require('connect-history-api-fallback')({index: '/index.html', verbose: false})
    },

Browser-sync&lite-server: http-proxy-middleware 拦截不存在的url

Browser-sync&lite-server: http-proxy-middleware intercepts non-existing urls

browser-sync

angular2-routing

lite-server

http-proxy-middleware

angular