Я читаю (отличную) книгу "Pro Angular 6" от Адама Фримена, и мне удалось без проблем воспроизвести его довольно сложные примеры в режиме разработки. Тем не менее, относительно короткая глава «SportsStore: прогрессивные функции и развертывание» сводит меня с ума.
Честно говоря, там не так много. Вам просто нужно запустить приложение в производственном режиме. Сервер Node / Express продолжает отправлять заголовок ответа, который, как мне кажется, предотвращает отображение приложения в браузере. Я получаю ошибку:
Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:8080/favicon.ico (“default-src”).
И если вы посмотрите на заголовки ответа, вы увидите, что что-то не так:
Content-Security-Policy: default-src 'none'
Это (я думаю) является основной причиноймоя проблема. Такая политика запрещает отображение приложения в браузере.
Я пытался добавить разные настройки (например, «self» вместо «none») в разных местах, включая server.js. Вы можете проверить две мои попытки в файле (одна из них использует пакет 'шлем', который должен быть подходящим инструментом для этой цели:
const express = require("express");
const https = require("https");
const fs = require("fs");
const history = require("connect-history-api-fallback");
const jsonServer = require("json-server");
const bodyParser = require('body-parser');
const auth = require("./authMiddleware");
const router = jsonServer.router("serverdata.json");
const enableHttps = false;
const ssloptions = {}
const helmet = require(`helmet`)
if (enableHttps) {
ssloptions.cert = fs.readFileSync("./ssl/localhost.crt");
ssloptions.key = fs.readFileSync("./ssl/localhost.key");
}
const app = express();
app.use(bodyParser.json());
app.use(auth);
app.use("/api", router);
app.use(history());
app.use("/", express.static("./dist/SportsStore"));
// TRY 1
app.use(helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"],
styleSrc: ["'self'", 'maxcdn.bootstrapcdn.com']
}
}))
// TRY 2
// custom header
app.all("/*", function(req, res, next) {
res.setHeader("Content-Security-Policy", "default-src 'none'");
next();
});
app.listen(8080,
() => console.log("HTTP Server running on port 8080"));
if (enableHttps) {
https.createServer(ssloptions, app).listen(8443,
() => console.log("HTTPS Server running on port 8443"));
} else {
console.log("HTTPS disabled")
}
Вот мой файл package.json:
{
"name": "sport-store",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"json": "json-server data.js -p 3500 -m authMiddleware.js"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/pwa": "^0.8.9",
"@angular/router": "^6.0.3",
"@angular/service-worker": "^6.0.3",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"helmet": "^3.21.2",
"helmet-csp": "^2.9.4",
"rxjs": "6.3.3",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.2.9",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"json-server": "^0.12.2",
"jsonwebtoken": "^8.5.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
Я компилирую код с помощью:
ng build --prod
и запускаю приложение с:
node server.js
В обоих случаях я не получаю ни одного предупреждения. исчерпать идеи, поэтому любая помощь будет высоко ценится.