Угловое приложение на сервере Apache не может найти бэкэнд

Question

У меня есть приложение Angular 6, которое я запускаю с npm start с конфигурацией proxy.conf.json для конфигурации бэкенда:

{
  "/api/*": {
    "target": "http://123.123.1.23:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Приложение работает нормально, но когда я скомпилирую его с помощью ng build (без -prod) и разверну его на сервере Apache в / var / www / html, я могу открыть веб-страницу, но связь с бэкендом, вероятно, не работает потому что это не может быть обнаружено.

Я добавил эту конфигурацию apache в /etc/apache2/sites-enabled/000-default.conf

<Directory "/var/www/html">
  AllowOverride All
</Directory>

Но я все еще не могу войти. Вы знаете, я что-то упустил в моей конфигурации?

Answer 1

Пример для Http Interceptor на одном из моих проектов:

Где apiUrl - это место, где ваш URL API определен в файлах environment.ts.

@Injectable()
export class HttpRequestInterceptorService implements HttpInterceptor {

  constructor() {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const url = environment.apiUrl;

    req = req.clone({
      url: url + req.url,
      headers: new HttpHeaders({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
      })
    });

    return next.handle(req)
      .pipe(catchError(error => {
        if ((<HttpErrorResponse>error).status === 401) {
          console.log(error);
        }
        return throwError(error);
      }));
    }
  }

Модуль для регистрации:

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule
  ],
  providers: [
  ]
})
export class WebRequestInterceptorModule {
  constructor(@Optional() @SkipSelf() parentModule: WebRequestInterceptorModule) {
    if (parentModule) {
      throw new Error('WebRequestInterceptorModule is already loaded. Import it in AppModule only');
    }
  }

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: WebRequestInterceptorModule,
      providers: [
        {provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptorService, multi: true}
      ]
    };
  }
}

Тогда зарегистрируйте это в своем app.module.ts WebRequestInterceptorModule.forRoot()