Angular Universal 页面返回正确的响应码,比如 404 Not Found

2020年04月08日 21:16 · 周三/阅读 589 次/评论 0 条

默认通过 Angular 创建的 Angular Universal 项目,在路由配置中使用通配符 ** 仅仅只是进行路由跳转。

{
  path: '**', redirectTo: '/not-found'
}

运行在 node express 环境下时,即使在页面内通过下方代码发送 http 状态码依然无法正确返回如 404 之类的响应码,只会以 200 返回。

如果没有正确返回响应码,在生产环境下使用,则会出现这个问题:没有正确返回状态码,搜索引擎爬虫认为这是一个正常的页面,将会被爬取并索引,导致用户在搜索引擎搜索结果中访问到错误页,在用户眼里这可能无关紧要,但是对于搜索引擎来说,这是十分重要的,不处理将会对网站排名造成巨大的影响。

在页面中设置状态码

新增页面组件 not-found,并修改 not-found.component.ts:

import { Component, OnInit, Optional } from '@angular/core';
import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { RESPONSE } from "@nguniversal/express-engine/tokens";
import { Response } from 'express';
 
@Component({
  selector: 'app-not-found',
  templateUrl: './not-found.component.html'
})
 
export class NotFoundComponent implements OnInit {
 
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Optional() @Inject(RESPONSE) private response: Response
  ) {
  }
 
  ngOnInit() {
    if (!isPlatformBrowser(this.platformId)) {
      if (this.response) {
        this.response.status(404); // 通过 RESPONSE 设置 HTTP 状态码,这里设置为 404
        this.response.statusMessage = 'Not Found'; // 设置 HTTP 响应实体内容
      }
    }
  }
}

上方代码运行在服务端渲染模式下,请求页面会返回一个HTTP响应码为 200 的 html 页面,这是因为在 server.ts 中没有使用 ngExpressEngine 函数处理响应并返回HTML页面。

ngExpressEngine() 是对 Universal 的 renderModule() 函数的封装。它会把客户端请求转换成服务端渲染的 HTML 页面。 你还要在某个适用于你服务端技术栈的模板引擎中调用这个函数。

第一个参数是 AppServerModule 。 它是 Universal 服务端渲染器和你的应用之间的桥梁。

第二个参数 extraProviders 是可选的。它能让你指定一些在服务端运行时特有的服务提供商。 只有当你的应用需要一些运行在服务器中才需要的信息时,才需要这么做。 比如这个运行中的服务器的源地址,当像前面例子中那样无法使用 Request 令牌时,可用它来计算 HTTP URL 的绝对地址。

ngExpressEngine() 函数返回了一个会解析成渲染好的页面的承诺( Promise )。 接下来你的引擎要决定拿这个页面做点什么。 在这个引擎的 Promise 回调函数中,把渲染好的页面返回给了 Web 服务器,然后服务器通过 HTTP 响应把它转发给了客户端。

Angular 9 的解决方案

需要通过修改 src/server.tsapp.engine 代码:
首先在代码开始处顶部引入下方的内容:

import {REQUEST, RESPONSE} from '@nguniversal/express-engine/tokens';
app.engine('html', (path, options, callback) => ngExpressEngine({
    bootstrap: AppServerModule,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: REQUEST,
        useValue: options.req,
      },
      {
        provide: RESPONSE,
        useValue: options.req.res,
      },
    ]
  })(path, options, callback)
);

低于 Angular 9(比如 Angular 8 等) 的解决方案

同样需要通过修改 src/server.tsapp.engine 代码:
首先在代码开始处顶部引入下方的内容:

import {REQUEST, RESPONSE} from '@nguniversal/express-engine/tokens';
app.engine('html', (path, options, callback) => ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: REQUEST,
        useValue: options.req,
      },
      {
        provide: RESPONSE,
        useValue: options.req.res,
      },
    ]
  })(path, options, callback)
);

以上的代码都是基于 Angular 默认生成的代码修改的。

重新运行服务端渲染项目,访问页面 not-found 即可在开发者工具中查看到正确的响应码了。

分类:Angular

更新 :2021年03月03日 05:06 · 周三

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

文章评论 (0)

暂无评论