Question

我使用angular2创建了一个角度通用应用程序，我在请求/类别服务。

this.hsService.getCategories(AppConstants.BASE_URL_GET_CATGORIES).subscribe(
  resp => {
    if (resp !== null) {
      console.log('response is not null');
    }else {
      console.log('response is null');
    }
  },
  err => {
    console.log('error');
    that.categories = that.Categories();
  }
);

但我在下面出现此错误错误。但不明白为什么？

错误错误：服务器上通过Http请求的URL必须是绝对的。 URL：/ category在validateRequestUrl（D：\ Myprojects \ angular 在新的ZoneMacroTaskConnection（D：\ Myprojects \ angular）中，通用\ ciel \ node_modules \ @angular \ platform-server \ bundles \ platform-server.umd.js：99：15 万向\ CIEL \ node_modules \ @angular \平台服务器\束\平台server.umd.js：226：9）在ZoneMacroTaskBackend.createConnection（D：\ Myprojects \ angular 万向\ CIEL \ node_modules \ @angular \平台服务器\束\平台server.umd.js：262：16）在httpRequest（D：\ Myprojects \ angular 万向\ CIEL \ node_modules \ @angular \ HTTP \束\ http.umd.js：1833：20）在Http.request（D：\ Myprojects \ angular universal \ ciel \ node_modules \ @angular \ http \ bundles \ http.umd.js：1943：34）在Http.get（D：\ Myprojects \ angular universal \ ciel \ node_modules \ @angular \ http \ bundles \ http.umd.js：1957：21）在n.getCategories（D：\ Myprojects \ angular universal \ ciel \ dist-server \ main.bundle.js：1：26301）在n.XV61.n.getCategories（D：\ Myprojects \ angular universal \ ciel \ dist-server \ main.bundle.js：1：24428）在n.XV61.n.ngOnInit（D：\ Myprojects \ angular universal \ ciel \ dist-server \ main.bundle.js：1：24346） at checkAndUpdateDirectiveInline（D：\ Myprojects \ angular universal \ ciel \ node_modules \ @angular \ core \ bundles \ core.umd.js：10875：19）

任何人都可以帮助我吗？

Answer 1

错误错误：服务器上通过Http请求的URL必须是绝对的。

看起来AppConstants.BASE_URL_GET_CATGORIES是undefined或无效http网址。

我认为您需要注入原始网址以创建绝对路径

export function createTranslateLoader(http: Http, @Inject('AppConstants.BASE_URL_GET_CATGORIES') originUrl: string) {
  return new TranslateHttpLoader(http, originUrl);
}

Answer 2

在服务器端呈现中，任何HTTP调用都需要绝对URL。

你可以

对HTTP请求使用绝对URL
注入原始URL并添加到基本URL服务器端

在{{3}}问题的答案中，有多种解决方法可以选择 2 。

我个人建议配置一个注入令牌，它为您提供服务器的来源，并使用HTTP拦截器将其添加到基本URL：

添加HTTP拦截器类：

import { Injectable, Inject, Optional } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';

@Injectable()
export class UniversalInterceptor implements HttpInterceptor {

  constructor(@Optional() @Inject('serverUrl') protected serverUrl: string) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    const serverReq = !this.serverUrl ? req : req.clone({
      url: `${this.serverUrl}${req.url}`
    });

    return next.handle(serverReq);

  }
}

将其添加到服务器端模块的providers数组：

providers: [
{
  provide: HTTP_INTERCEPTORS,
  useClass: UniversalInterceptor,
  multi: true
}

在服务器端配置中（在此示例中表示），为令牌提供服务器的原始URL：

let protocol = 'http';
if (process.env.NODE_ENV == 'production') {
   protocol = 'https'
}

app.engine('html', (_, options, callback) => {
  let engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: 'serverUrl',
        useValue: `${protocol}://${options.req.get('host')}`
      }
    ]
  });

  engine(_, options, callback)
})

通过服务器上的Http请求的URL必须是绝对的

2 个答案: