Apache 服务器上的 Angular 应用程序找不到后端

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）编译它并将其部署在 /var/www/html 下的 Apache 服务器上时，我可以打开网页，但与后端的通信可能无法正常工作因为无法被发现。

我在/etc/apache2/sites-enabled/000-default.conf中添加了这个apache配置

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

但我仍然无法登录。你知道我在配置中遗漏了什么吗？

Answer 1

我的一个项目中的 Http 拦截器示例：

其中 apiUrl 是您的 API url 在 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()