Heroku部署的Angular应用非根路由报CSP和404错误如何解决？

问题根因说明 #

你遇到的两个问题是独立又关联的：

1. 非根路由404是Angular HTML5路由模式的服务器适配问题，本地开发时Angular dev-server默认做了路由 fallback 所以不会触发，部署到Heroku后没有对应配置就会报错
2. CSP报错是你当前的meta标签配置存在语法错误导致的

1. 修复非根路由404问题 #

二选一即可：

方案A：修改服务器配置（推荐，无hash后缀更美观） #

如果你是用Express托管Angular构建后的静态资源，在Express的路由规则最后添加通配符路由，所有未匹配到静态资源的请求全部返回index.html，让Angular接管路由匹配：

const express = require('express');
const path = require('path');
const app = express();

// 先托管dist目录下的静态资源
app.use(express.static(__dirname + '/dist/你的Angular项目名称'));

// 通配符路由放最后
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/你的Angular项目名称/index.html'));
});

app.listen(process.env.PORT || 8080);

方案B：切换Angular路由为Hash模式（无需改服务器配置，快速生效） #

修改路由模块的RouterModule配置，开启hash路由：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

开启后路由会自动添加#前缀，访问路径变为https://myAngularApp.herokuapp.com/#/some-routing，无需服务器额外配置即可正常访问。

2. 修复CSP配置错误 #

你当前的CSP配置存在语法错误，修正后的配置如下：

<meta http-equiv="Content-Security-Policy"
      content="default-src * 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://mySpringBootApp.herokuapp.com https://myAngularApp.herokuapp.com;">

修改点说明：

• 修正default-src*缺少空格的问题，改为default-src * 'self'
• 修正指令分隔混乱的问题，每个指令用分号分隔，避免浏览器解析CSP规则失败触发报错

内容的提问来源于stack exchange，提问作者mat373