Node.js/Express.js/Angular2のForBiddenError

Question

this GitHub sample appを変更して、KOAの代わりにExpressを使用します。しかし、Expressの/ルートがindex.htmlをロードしようとすると、Access Deniedエラーが発生します。 新しい/ルートがindex.htmlに正常に配信されるように、以下のコードにどのような変更を加える必要がありますか？サンプルアプリを作っ

唯一の変更は、router.jsを変更するindex.jsを置き換えるために、そしてpackage.jsonを変更することがあります。次のように私は変更が表示されます：

---

router.js

---

は、ここでは簡潔にするために省略し、古いコンテンツを、新たに関連する部分 router.jsです。私は /の要求を処理するため *ルートを追加し、私は module.exports = function(app)を追加したことをNOET：

'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": "soos.gabor86@gmail.com" 
    }, 
    "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) 

Answer 1

エラーがres.sendfile（../）から来ています。明示的に相対パスでsendFileを実行することはできません。これを解決するには、パスモジュールを必要とし、相対パスの代わりにpath.resolve('/wherever/youre/going')を使用します。