Question

我有一个带服务器端渲染的简单角度应用程序。我描述了我的组件的ngOnInit，我在其中调用了http.get方法。但是如果我在我的Rest端点上设置调试，我看到这个方法调用了两次。除了第一次打电话，我得到没有凭据的HttpRequest，第二个 - 凭证。为什么？在控制台上通过console.log我只看到一个电话。我怎样才能只使用凭证来调用此休息一次？

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppComponent } from './app.component';
    import {HttpModule} from "@angular/http";
    import {FormsModule} from "@angular/forms";
    import {HttpClientModule} from "@angular/common/http";

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule.withServerTransition({appId: 'angular-universal'}),
        FormsModule,
        HttpClientModule,
        HttpModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.server.module.ts

 import { NgModule } from '@angular/core';
    import { ServerModule } from '@angular/platform-server';
    import { AppModule } from './app.module';
    import { AppComponent } from './app.component';

    @NgModule({
      imports: [
        ServerModule,
        AppModule
      ],
      bootstrap: [AppComponent]
    })
    export class AppServerModule { }

server.ts

    import 'reflect-metadata';
    import 'zone.js/dist/zone-node';
    import { platformServer, renderModuleFactory } from '@angular/platform-server'
    import { enableProdMode } from '@angular/core'
    import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
    import * as express from 'express';
    import { readFileSync } from 'fs';
    import { join } from 'path';

    const PORT = 4000;

    enableProdMode();

    const app = express();

    let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

    app.engine('html', (_, options, callback) => {
      const opts = { document: template, url: options.req.url };

      renderModuleFactory(AppServerModuleNgFactory, opts)
        .then(html => callback(null, html));
    });

    app.set('view engine', 'html');
    app.set('views', 'src')

    app.get('*.*', express.static(join(__dirname, '..', 'dist')));

    app.get('*', (req, res) => {
      res.render('index', { req,  preboot: true});
    });

    app.listen(PORT, () => {
      console.log(`listening on http://localhost:${PORT}!`);
    });

app.coponent.ts

    import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
    import {Hero} from "./hero";
    import {HttpClient} from "@angular/common/http";
    import 'rxjs/add/operator/map';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements OnInit{
      title = 'app';
      hero: Hero;
      constructor(private http: HttpClient){
      }

      ngOnInit(): void {
        this.http.get('http://localhost:8080/test', { withCredentials: true }).subscribe(data => {
          console.log("Init component");
          console.log(data);
        });
      }

    }

Answer 1

由于您的API在不同的服务器localhost:8000上运行，因此我非常确定使用了CORS（跨源资源共享）协议。

如果POST或GET中包含任何非简单内容或标题，则CORS规范要求OPTIONS调用在POST或GET之前。它也称为preflight request，有关详细信息，请参阅this link。

因此，如果您查看标题，您很可能会看到，第一个调用是OPTIONS调用，第二个调用是您的实际GET。

对于您的问题：此行为是设计使然，如果您要跨不同来源提出请求，则必须这样做。

Answer 2

如果对服务器端渲染使用angular universal，那么它将首先在服务器端呈现页面（第一个GET请求），然后再在浏览器中呈现（第二个GET请求）。

有一项称为状态转移的技术，可让您“缓存”＃34;服务器发出的请求，将它们传输到您的客户端并重用响应，因此您无需再次进行响应。此功能目前正在实现为angular / universal，但您可以通过自己的（使用HttpClient拦截器）轻松实现它。

您还可以为代码添加条件，例如您不会从服务器端发出API请求，因为您知道它们会失败（例如，缺少授权）。

这是你可以做到的：

constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        // Client only code.
    ...
    }
    if (isPlatformServer(this.platformId)) {
        // Server only code.
    ...
    }
}

Answer 3

角度服务器端渲染逐步运行在注释下方

步骤1：-> ng add @ng-toolkit/universal

步骤2：-> npm install

步骤3：-> npm run build:prod

步骤4：-> ng build --prod

步骤5：-> npm run server

步骤6：->运行cmd并编写命令-> curl http://localhost:4000

我的服务器端角度应用https://exampreparation.study

Angular 4 - 服务器端渲染

3 个答案: