0

i를 angular2 응용 프로그램에서 다음 라우팅 있습니다브라우저 동기화 및 라이트 - 서버 : HTTP 프록시 - 미들웨어 차단 존재하지 않는 URL을

:

/** 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 페이지에 액세스하는 것을 제외하고는 모든 것이 잘 작동합니다. 즉, 사용자가 잘못된 링크를 입력하면 "찾을 수 없음/URL"이 표시되고 로그에 흥미가 없습니다. 난 그냥이 세 줄을 제거하는 경우 :

 middleware: { 
      1: apiProxy 
     }, 

이 다시 작동하기 시작하고 난 http://myapp/some/broken/url에 404 페이지를 얻을.

하지만 백엔드 관련 항목에 프록시가 필요합니다. URL과 같은 'api'만 프록시해야하는 경우에도 일반 API 경로와 간섭하는 이유는 무엇입니까?

p.s. 내가 사용하고 있습니다 :

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

답변

0

어떻게 든로 변경하여 고정 :

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