Node.js/Express.js/Angular2의 ForBiddenError

Question

this GitHub sample app을 수정하여 KOA 대신 Express를 사용합니다. 그러나 / 익스프레스의 경로가 index.html을로드하려고하면 Access Denied 오류가 발생합니다. 새로운 / 경로가 index.html에 성공적으로 제공 될 수 있도록 아래 코드를 변경해야합니까? 샘플 응용 프로그램을 만든

유일한 변화는 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": "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" 
    } 
} 

---

오류 메시지

---

여기 는 파이어 폭스에서 인쇄 전체 오류 메시지입니다 :

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 (../)에서 유래; 당신은 express로 상대 경로를 가진 sendFile을 보안 문제로 간주 할 수 없다. 이 문제를 해결하려면 경로 모듈을 필요로하고 상대 경로 대신 path.resolve('/wherever/youre/going')을 사용하십시오.