1
我正在修改this GitHub sample app以使用Express而不是KOA。但是当Express中的/
路由尝试加载index.html
时,我得到一个Access Denied
错误。 需要对以下代码进行哪些具体更改,以便新的/
路由可以成功地为index.html
服务?Node.js/Express.js/Angular2中的ForBiddenError
到样品应用所做的唯一变化是修改router.js
,取代index.js
,并修改package.json
。我将显示如下变化:
router.js
这里是新的相关部分
router.js
,为简洁起见省略了旧内容。 NOET我添加了一个
*
途径来处理
/
要求和我加
module.exports = function(app)
:
'use strict';
// expose the routes to our app with module.exports
module.exports = function(app) {
//other routes omitted for brevity
app.get('*', function(req, res) {
console.log('inside/route!');
res.sendfile('../client/index.html'); // load the single view file (angular will handle the front-end)
});
};
server/index.js
这是新
server/index.js
:
// set up ======================================================================
var express = require('express');
var app = express(); // create our app w/ express
var port = process.env.PORT || 8080; // set the port
var morgan = require('morgan'); // log requests to the console (express4)
var bodyParser = require('body-parser'); // pull information from HTML POST (express4)
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users
app.use(morgan('dev')); // log every request to the console
app.use(bodyParser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded
app.use(bodyParser.json()); // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(methodOverride());
app.use('/scripts', express.static(__dirname + '/node_modules/'));
// load the routes
require('./router')(app);
// listen (start app with node server.js) ======================================
app.listen(port);
console.log("App listening on port " + port);
package.json
的新包。 json是:
{
"name": "angular2-esnext-starter",
"version": "1.0.0",
"main": "server/index.js",
"scripts": {
"start": "node server/index.js",
"test": "COVERAGE_ENABLED=true gulp test",
"webdriver-update": "webdriver-manager update"
},
"repository": {
"type": "git",
"url": "git+https://github.com/blacksonic/angular2-esnext-starter.git"
},
"author": {
"name": "blacksonic",
"email": "[email protected]"
},
"license": "ISC",
"keywords": [
"angular2",
"es6",
"webpack",
"gulp"
],
"description": "Angular 2 development in Javascript with ES6/ES7 syntax powered by Babel.",
"engines": {
"node": "4.4.2"
},
"dependencies": {
"express": "^4.13.4",
"jsonwebtoken": "7.0.1",
"morgan": "^1.1.1",
"method-override": "^2.1.3",
"node-uuid": "1.4.7"
},
"devDependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"babel-core": "6.10.4",
"babel-eslint": "6.1.1",
"babel-loader": "6.2.4",
"babel-plugin-__coverage__": "11.0.0",
"babel-preset-angular2": "0.0.2",
"babel-preset-es2015": "6.9.0",
"bootstrap": "3.3.6",
"codeclimate-test-reporter": "0.3.3",
"del": "2.2.1",
"es6-promise": "3.2.1",
"es6-shim": "0.35.1",
"gulp": "3.9.1",
"gulp-cssnano": "2.1.2",
"gulp-delete-lines": "0.0.7",
"gulp-eslint": "3.0.1",
"gulp-less": "3.1.0",
"gulp-nodemon": "2.1.0",
"gulp-protractor": "2.4.0",
"gulp-util": "3.0.7",
"gulp-watch": "4.3.8",
"jasmine-core": "2.4.1",
"json-loader": "0.5.4",
"karma": "1.1.1",
"karma-coverage": "1.1.0",
"karma-jasmine": "1.0.2",
"karma-phantomjs-launcher": "1.0.1",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "1.7.0",
"localStorage": "1.0.3",
"mini-lr": "0.1.9",
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "2.1.7",
"protractor": "3.3.0",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.3",
"run-sequence": "1.2.2",
"rxjs": "5.0.0-beta.6",
"validate.js": "0.10.0",
"webpack": "1.13.1",
"zone.js": "0.6.12"
}
}
错误消息
这里是它打印在FireFox完整的错误消息:
ForbiddenError: Forbidden
at SendStream.error (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/send/index.js:275:31)
at SendStream.pipe (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/send/index.js:508:12)
at sendfile (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/express/lib/response.js:1051:8)
at ServerResponse.res.sendfile (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/express/lib/response.js:481:3)
at ServerResponse.eval [as sendfile] (eval at wrapfunction (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/depd/index.js:413:5), <anonymous>:4:11)
at /home/user/nodejs_apps/angular2_oauth_seed_app/server/router.js:94:17
at Layer.handle [as handle_request] (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/express/lib/router/layer.js:95:5)
at next (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/express/lib/router/route.js:131:13)
at Route.dispatch (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/home/user/nodejs_apps/angular2_oauth_seed_app/node_modules/express/lib/router/layer.js:95:5)
谢谢+1。是的,我确实发现了我自己。但是有一个下游问题需要弄清楚该应用程序中的哪个'index.html'文件要作为Angular2应用程序的根发送。当我发送'client/index.html'或'dist/client/index.html'时,浏览器控制台会以指示无法读取ES6的方式进行投诉。不知何故,KOA代码避免了这个问题,但迄今为止的express.js代码无法为有效的Angular2/ES6应用程序提供服务。 – FirstOfMany