Angular 4 - 服務器端渲染

我有一個簡單的角度應用程序與服務器端渲染。我描述了我的組件的ngOnInit，我在那裏調用http.get方法。但是如果我在Rest端點上設置調試，我發現這個方法調用了兩次。除了第一次打電話時，我會得到沒有憑證的HttpRequest，第二次 - 憑證。爲什麼？並通過console.log在控制檯上，我只看到一個調用。我如何才能使用憑證只調用一次該休息？Angular 4 - 服務器端渲染

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); 
     }); 
     } 

    }

來源

2017-10-10 ch.45

如果您使用角度通用進行服務器端呈現，那麼它將首先在服務器端呈現頁面（第1個GET請求），然後再次在瀏覽器中呈現（第2個GET請求）。

有一種稱爲狀態轉移的技術，它允許您「緩存」由服務器發出的請求，將它們轉移到您的客戶端並重新使用響應，因此您不需要再次創建它們。此功能目前正在實現角度/通用，但它很容易由您自己實現（使用HttpClient攔截器）。

您也可以爲您的代碼添加條件，例如您不會從服務器端發出您知道它們會失敗的API請求（例如，缺少授權）。

這是你如何做到這一點：

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

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

來源

2017-10-11 15:34:41

是的，但有可能避免第一GET請求？正確地請求服務器，因爲對於我來說，請求帶有某些標頭（如cookie）很重要，例如？這意味着來自服務器端的請求是無用的。 –

是的，你可以通過調整代碼避免，我會更新我的答案。 –

由於你的API運行在不同的服務器上，我很確定使用了CORS（跨源資源共享）協議。

如果POST或GET包含任何非簡單內容或標頭，則CORS規範要求將OPTIONS調用先於POST或GET。它也被稱爲preflight request，更多信息請參閱this link。

所以如果你看看頭文件，你很可能會看到，第一個調用是OPTIONS調用，第二個調用是實際的GET。

對於你的問題：這種行爲是有意設計的，如果你在不同來源提出請求，這種行爲是必須的。

來源

2017-10-11 08:06:55 Moema

Angular 4 - 服務器端渲染

回答

相關問題