包json

Question

我正在尝试让我的应用程序在heroku上运行。我遵循了许多教程，允许我使用快速服务器运行它。在本地运行我没有问题，应用程序在Heroku上运行良好。但是，当我尝试直接访问子路由或刷新我的应用程序时，我看到：

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC4AAAA0ArgC7UdQT1MAAAGwAAAQ6AAALgxKsqRTR1NVQgAAEpgAAAH3AAAELqI5y+RPUy8yAAAUkAAAAE8AAABgaGyBu2NtYXAAABTgAAABlAAAAkQkRATXY3Z0IAAAFnQAAABeAAAAugDsQf1mcGdtAAAW1AAABZcAAAvNb3/BHGdhc3AAABxsAAAACAAAAAgAAAAQZ2x5ZgAAHHQAAEApAAB3CtbiupxoZWFkAABcoAAAADYAAAA2BkubWWhoZWEAAFzYAAAAIAAAACQHFARfaG10eAAAXPgAAAI6AAAEEk4TN4Nsb2NhAABfNAAAAhIAAAISiLhpam1heHAAAGFIAAAAIAAAACACigzgbmFtZQAAYWgAAACUAAABHhQGLdJwb3N0AABh/AAAAq4AAASRk5y6n3ByZ...QxUajCCFt4p9HP4fzdSWs2XhWl5HvJazrIrFUyB0l5dpqcW10lV2wukjMLuAvyMHNiYpgPsrCVXZDKrkpll6UWkh7kABVAFVCDe7UFmxagDegA+hLHRPbqtMo7ZHCpKdT6tPGXybzo0+RXBLoPZt1tELcXxCmAAyZwYTJvdDFZKnDER44X2451rDqCyunIsRWvLSx6wnWqwPj/uX5/KuEy6DL0z6A/Fn79VihxMFJsrlAFy4DpZOcvNlMeNp+BRDLj0r+XFdRxdSNSNxiI/AL3ojKdAAB4AWPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGdictkUwWDAwsDJogTgOPN4c9iz6bMos4iysHFChUDZXJnMWTSZZJrAQt9M+YQYBBh4GTgY2kEZOoJiA0z4GBxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

很难知道这是一个部署问题还是我打开的某种csp配置。我试着写：

  <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'; font-src 'unsafe-inline' data: ;">

在我的Iindex.html中，但仍然收到相同的错误。似乎是什么问题？

我正在使用Material Icons cdns：

包json

{
  "name": "temp-sensor",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angularfire2": "5.0.0-rc.3",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "^2.4.1",
    "firebase": "4.6.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper": "^1.0.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14",
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  },
  "engines": {
    "node": "8.9.3",
    "npm": "5.6.0"
  }
}

server.js

//Install express server
const express = require('express');
const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist'));

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

app.get('*', function(req, res) {
    res.sendfile('/index.html')
  })

Answer 1

这是修复Angular站点刷新错误的最简单方法。

在您网站的 index.html

<base href="./index.html">

接下来在 app.module.ts

中

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

现在将它们添加到 app.module.ts

中的提供商

provider：[OtherName，{provide：LocationStrategy，useClass：HashLocationStrategy}]，

注意，这会在您的路线中添加＃标记！

现在部署网站并尝试刷新。

Answer 2

在heroku上部署时遇到了同样的问题，对我来说，它有助于使用npm软件包serve而不是使用server.js脚本所以我在package.json脚本上添加了 "start": "serve -s dist",

Heroku Angular 4应用程序，刷新时CSP错误

包json

server.js

2 个答案: