Что-то не так с выполнением http-запроса в ngOnInit компонента при использовании Angular Universal?

Question

Я запускаю свое приложение Angular через ng serve для разработки и не обнаруживаю никаких ошибок. Однако при использовании SSR я получаю сообщение об ошибке в журнале своего сервера всякий раз, когда загружаю компонент, который делает http-запрос как часть его метода ngOnInit. Что-то не так с моей стратегией?

Я не нашел никакой полезной информации от поиска ошибки. Должен ли я ждать, пока страница полностью загрузится, чтобы сделать мой запрос, или использовать какой-либо другой метод? Если да, как мне это сделать?

Я использую пакет http-proxy-middleware для отправки запросов на сервер django. https://github.com/chimurai/http-proxy-middleware

Это ошибка, которую я получаю, когда запрос сделан как часть ngOnInit:

ERROR Error
    at XMLHttpRequest.send (C:\{...}\dist\{...}\server\main.js:201490:19)
    at Observable.rxjs__WEBPACK_IMPORTED_MODULE_1__.Observable [as _subscribe] (C:\{...}\dist\{...}\server\main.js:23724:17)
    at Observable._trySubscribe (C:\{...}\dist\{...}\server\main.js:186583:25)
    at Observable.subscribe (C:\{...}\dist\{...}\server\main.js:186569:22)
    at scheduleTask (C:\{...}\dist\{...}\server\main.js:106745:32)
    at Observable.rxjs__WEBPACK_IMPORTED_MODULE_7__.Observable [as _subscribe] (C:\{...}\dist\{...}\server\main.js:106807:13)
    at Observable._trySubscribe (C:\{...}\dist\{...}\server\main.js:186583:25)
    at Observable.subscribe (C:\{...}\dist\{...}\server\main.js:186569:22)
    at subscribeToResult (C:\{...}\dist\{...}\server\main.js:196664:23)
    at MergeMapSubscriber._innerSub (C:\{...}\dist\{...}\server\main.js:191854:116)

Вот соответствующая часть моего тестового компонента :

export class TestComponent implements OnInit {
  output: String = "The server is not running or is not connected"

  constructor(private httpTestService: HttpTestService) { }

  ngOnInit(): void {
    this.testGetRequest();
  }

  testGetRequest() {
    this.httpTestService.testGetRequest().subscribe(temp => {
      this.output = temp.message; // response is json with a 'message' attribute
    });
  }

}

Вот соответствующая часть моего HttpTestService:

import { HttpClient } from '@angular/common/http';

  constructor(private http: HttpClient) { }

  testGetRequest(): Observable<any> {
    return this.http.get('/api/endpoint1');
  }

Я считаю, что эта часть моего server.ts может быть важной:

import { createProxyMiddleware } from 'http-proxy-middleware';

export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/.../browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // re-route requests to /api/ to the django REST api
  server.use('/api/**', createProxyMiddleware({ target: 'http://localhost:8000', changeOrigin: true }));

Даже при работе с SSR приложение работает нормально, за исключением ошибки, которую я получаю в консоли сервера.

Answer 1

Вы должны использовать абсолютные URL при выполнении HTTP-вызовов. docs

Таким образом, проблема, возможно, здесь

testGetRequest(): Observable<any> {
  return this.http.get('/api/endpoint1');
}

Чтобы исправить это, вы можете использовать перехватчик, который изменит относительные URL-адреса на абсолютные и предоставит этот перехватчик внутри AppServerModule.

Перехватчик:

import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Inject, Injectable, Optional } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';

@Injectable()
export class UniversalInterceptor implements HttpInterceptor {

  constructor(@Optional() @Inject(REQUEST) protected request: Request) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    let serverReq: HttpRequest<any> = req;
    if (this.request && req.url.indexOf('http') !== 0) {
      let newUrl = `${this.request.protocol}://${this.request.get('host')}`;
      if (!req.url.startsWith('/')) {
        newUrl += '/';
      }
      newUrl += req.url;
      serverReq = req.clone({url: newUrl});
    }

    return next.handle(serverReq);
  }
}

AppServerModule -

@NgModule({
  imports: [
    ...
  ],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UniversalInterceptor,
      multi: true,
    },
  ],
})
export class AppServerModule {}

Надеюсь, это поможет