代码之家 › 专栏 › 技术社区 › Himani

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

angular-universal angular node.js

Himani · 技术社区 · 6 年前

我用Angular2创建了一个AngularUniversal应用程序,我在这里请求/分类服务。

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:/validateRequesturl(d:\myprojects\angular)处的类别通用\ciel\node_模块\@angular\platform server\bundles\platform server.umd.js:99:15,位于New ZoneMacroTaskConnection(D:\MyProjects\angular 通用\ciel\node_模块\@angular\platform server\bundles\platform server.umd.js:226:9) 位于ZoneMacroTaskBackend.CreateConnection(D:\MyProjects\Angular 通用\ciel\node_模块\@angular\platform server\bundles\platform server.umd.js:262:16) 在httprequest(d:\myprojects\angular 通用\ciel\node\u模块\@angular\http\bundles\http.umd.js:1833:20) 根据http.request(d:\myprojects\angular universal\ciel\node\u modules\@angular\http\bundles\http.umd.js:1943:34) 在http.get(d:\myprojects\angular universal\ciel\node\u modules\@angular\http\bundles\http.umd.js:1957:21) at 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) 在checkandupdateidirectiveinline(d:\myprojects\angular universal\ciel\node\u modules\@angular\core\bundles\core.umd.js:10875:19)

有人能帮我吗?

2 回复 | 直到 6 年前

Rohìt Jíndal 6 年前

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

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

我认为你需要注入源URL来创建绝对路径

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

Joshua Chan 6 年前

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

你也可以

对HTTP请求使用绝对URL
插入源URL并在服务器端预先发送到基URL

有多种解决方法可供选择二在答案中 this 问题。

我个人建议配置一个注入令牌,它为您提供服务器的来源,并使用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: [
{
  provide: HTTP_INTERCEPTORS,
  useClass: UniversalInterceptor,
  multi: true
}

在服务器端配置(本例中为express)中,使用服务器的源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)
})