Express serving static file: can't set headers after they are send - node.js

I am using the express.static built-in middleware function to serve static files, but the console prints the error: Can't set headers after they are sent.
here is my code, i don't know what is wrong with this
'use strict';
let path = require('path');
let express = require('express');
let bodyParser = require('body-parser');
let mongoose = require('mongoose');
let formidable = require('express-formidable');
let routes = require('./routes');
let app = express();
let port = process.env.PORT || 3000;
let db = mongoose.connect('mongodb://localhost:27017/old-driver');
// deal with img post
app.use(formidable({
uploadDir: path.join(__dirname, 'upload'),
keepExtensions: true
}));
app.use(bodyParser.urlencoded({extended: true }));
app.use(bodyParser.json());
// access-control
app.all('*', (req, res, next) => {
res.set("Access-Control-Allow-Origin", "*");
res.set("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
res.set("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.set("X-Powered-By",' 3.2.1')
res.type("application/json");
res.type("jpg");
next();
});
// set assets path, GET /assets/demo.png
app.use('/assets', express.static('upload'));
routes(app);
app.listen(port);
the route middleware method:
getAllTeachers: (req, res) => {
Teacher.find({}, (err, teacher) => {
if (err) {
res.send(err);
} else {
res.json(teacher);
}
});
},
Even if I remove the access-contol code as shown below, still get error
let db = mongoose.connect('mongodb://localhost:27017/old-driver');
// deal with img post
app.use(formidable({
uploadDir: path.join(__dirname, 'upload'),
keepExtensions: true
}));
app.use(bodyParser.urlencoded({extended: true }));
app.use(bodyParser.json());
// set assets path, GET /assets/demo.png
app.use('/assets', express.static('upload'));
routes(app);
app.listen(port);
when I request 2 existing jpg file, I also get 404 error in one jpg file
404 screenshot

To solve this you need to use app.use function instead of app.all for mounting your middleware function. app.use adds the middleware function to middleware stack ensuring that they are executed in same order at which they are added.
So you need to do this :
app.use((req, res, next) => { //change app.all to app.use here and remove '*', i.e. the first parameter part
res.set("Access-Control-Allow-Origin", "*");
res.set("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
res.set("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.set("X-Powered-By",' 3.2.1')
res.type("application/json");
res.type("jpg");
next();
});
EDIT:
As you told in comments the above method doesn't work so what you can do is use the setHeaders method of express.static method to set headers before file is served like this :
app.use('/assets', express.static('upload', {
setHeaders: function(res, path) {
res.set("Access-Control-Allow-Origin", "*");
res.set("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
res.set("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.set("X-Powered-By",' 3.2.1')
res.type("application/json");
res.type("jpg");
}
}));
Put this static file serving middleware method above the app.use so that app.use method for setting headers is not called hence the headers won't be set again.

Related

Basic node error: app.use() requires a middleware function

I'm new to node and am having some probably very basic trouble with an error message that I cannot fix:
proj/node_modules/express/lib/application.js:210
throw new TypeError('app.use() requires a middleware function')
I've been trying to use the csrf token module but for some reason I'm getting the above error code - literally clueless as to finding a fix here. May be very obvious to some - does anyone have any ideas?
This is the offending line of code: app.use(csrfProtection); // ERROR HERE: REASON UNKNOWN
I have installed the csurf module exactly identically to the tutorial I'm following. Any help would be much appreciated - original code is below:
const express = require('express');
const path = require('path');
const app = express();
const bodyParser = require('body-parser'); // enables use of body parser - body parser helps get data entered from a form (via req.body)
const subRoutes = require('./routes/subs');
const adminRoutes = require('./routes/admin');
const authRoutes = require('./routes/auth');
const mongoConnect = require('./util/database').mongoConnect;
let mailActivator = require('./util/nodemailer'); // activates nodemailer.js
const session = require('express-session');
const MongoDBStore = require('connect-mongodb-session')(session); // session argument from express-session
const csrf = require('csrf');
const store = new MongoDBStore({
uri: 'mongodb+srv://_____:______#empool-3klmr.mongodb.net/______',
collection: 'sessions'
});
const csrfProtection = csrf();
app.set('view engine', 'ejs'); // use EJS templating engine
app.set('views', 'views'); // views located here
app.use(bodyParser.urlencoded({
extended: false
})); // parses text as URL encoded data (which is how browsers tend to send form data from regular forms set to POST) and exposes the resulting object (containing the keys and values) on req.body)
app.use(bodyParser.json()); // for JSON post API requests
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
secret: "my secret",
resave: false,
saveUninitialized: false,
store: store
}));
app.use((req, res, next) => {
console.log('This demo middleware will always run...');
console.log('req.get("host")', req.get("host"));
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
app.use((req, res, next) => {
res.locals.isLoggedIn = req.session.isLoggedIn;
res.locals.csrfToken = req.csrfToken();
next();
});
app.use(csrfProtection); // ERROR HERE: REASON UNKNOWN
app.use(subRoutes);
app.use(authRoutes);
app.use(adminRoutes);
//app.listen(3000);
mongoConnect(() => {
app.listen(process.env.PORT || 3000);
});
console.log('App running successfully...');
Here

Express server middleware execute twice?

After trying to log some data on index file. I found my express server execute twice. Why do i get this error/bug?
Running Node 12.13.0 LTS, Express 4.17.1 and latest packages versions by the date of this post. I’ve tried on commenting some parts of code and always seem to end up running twice.
My app.js code:
const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const path = require('path');
const bodyParser = require('body-parser');
const favicon = require('serve-favicon');
const app = express();
// ENV Variables
require('dotenv').config();
const PORT = process.env.PORT;
// Authentication Packages
const session = require('express-session');
const passport = require('passport');
// Middlewares
app.use(favicon(path.join(__dirname,'public','images','favicon.ico')));
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.json());
app.use(session({
secret: 'GBR6N7^?5Xx-Ldqxf&*-Hv$',
resave: false,
saveUninitialized: false,
//cookie: { secure: true }
}));
app.use(passport.initialize());
app.use(passport.session());
// View Engine
app.use(expressLayouts);
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// Routes
app.use('/', require('./routes/index'));
// Controllers
app.use('/profile', require('./routes/profile'));
app.use('/products', require('./routes/products'));
app.use('/bookmarks', require('./routes/bookmarks'));
// Catch 404
app.use((req, res) => {
res.render('pages/404');
});
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
and my index.js code:
const express = require('express');
const router = express.Router();
// Official pages
router.get('/', (req, res) => {
// THIS IS THE CODE I GET TWICE ON CONSOLE
console.log(req.user);
console.log(req.isAuthenticated());
// THIS IS THE CODE I GET TWICE ON CONSOLE
res.render('pages/index');
});
router.get('/about', (req, res) => {
res.render('pages/about');
});
router.get('/features', (req, res) => {
res.render('pages/features');
});
// Footer pages
router.get('/terms', (req, res) => {
res.render('pages/terms');
});
router.get('/refunds', (req, res) => {
res.render('pages/refunds');
});
module.exports = router;
Also i have those two functions on my profile.js (for passport.js):
passport.serializeUser((userId, done) => {
done(null, userId);
});
passport.deserializeUser((userId, done) => {
done(null, userId);
});
I get those results twice:
console.log(req.user);
console.log(req.isAuthenticated());
Output (Executed twice!):
undefined
false
undefined
false
and I expect one:
undefined
false
Due to how Express routing works, the path / will match / and /about and /favicon.ico etc. This is because Express supports not just endpoint routing but also path mounting. In other words, express supports things like this:
const app = express();
const route = express.Router();
route.get('/world', (req, res) => { res.send('hello') });
app.get('/hello', route); // mounts world to hello
// so we can access /hello/world
In order to support the feature above, express needs to interpret paths such as /hello to mean both /hello and /hello/anything/else. It needs to treat it as both the endpoint and potentially just a path leading to an endpoint.
This means that if you have a path:
app.get('/', () => {});
It will also trigger if the browser requests /favicon.ico. And browsers request favicon.ico to draw the tiny icon in the browser tab. This is why your route is triggered twice.
A few things to keep in mind when writing Express routes/controllers:
Make sure that the / path is last because otherwise it will also respond to requests to all your other paths.
If you are using express.static() make sure it is set up before the / path. Yes, the first rule above should also cover this but I see this issue often enough that it merits its own point.
In your case you can possibly fix the issue by simply creating a favicon.ico icon and saving it in the static (public) folder.

Simple configurable Express middleware not executing

I'm trying to build a configurable middleware (a custom middleware function that takes custom parameters, and returns a (req,res,next) function that uses these parameters) in Express. However, I can't get this middleware to execute on a router.get() call.
The expected behaviour in the code below is that, when trying to GET the home page (/), the console logs 'success!' then I get a 404 (as the next() in the middleware will pass me on to the 404 function).
However, nothing happens and the request times out. The function is being detected, as when I put the console.log() in the middleware but just before the return function(req,res,next){ line, I am seeing the output on the console. I only get this issue when the configurable middleware is returning a function.
./app.js (no changes to the template that Express builds):
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
./routes/index.js:
var express = require('express');
var router = express.Router();
var simplemiddleware = require('../middlewares/simplemiddleware');
/* GET home page. */
router.get('/', function(req, res, next) {
simplemiddleware.simpleReturn('success!');
});
module.exports = router;
./middlewares/simplemiddleware.js:
exports.simpleReturn = function (outputString){
return function (req,res,next) {
console.log(outputString);
next();
}
}
Please note that the
var simplemiddleware = require('../middlewares/simplemiddleware');
actually is a function, to fix the problem, please try the following.
./routes/index.js:
var simplemiddleware = require('../middlewares/simplemiddleware');
/* GET home page. */
router.get('/', function(req, res, next) {
// note `simplemiddleware.simpleReturn(str)` returns a function
let func = simplemiddleware.simpleReturn('success!');
// run the middleware
func(req, res, next);
});

Express app - Change base url

I'm building a Q&A app following this tutorial and everything goes well, but I need to change the chance to change the base root where the app is being served via config files.
Now the app is served in localhost:8080 and I need to be served over localhost:8080/qae (for example).
I think the answer is near this piece of code:
// Setup server
var app = express();
var server = http.createServer(app);
var socketio = require('socket.io')(server, {
serveClient: config.env !== 'production',
path: '/socket.io-client'
});
require('./config/socketio')(socketio);
require('./config/express')(app);
require('./routes')(app);
// Start server
function startServer() {
app.angularFullstack = server.listen(config.port, config.ip, function() {
console.log('Express server listening on %d, in %s mode '+config.ip, config.port, app.get('env'));
});
}
setImmediate(startServer);
(from /server/app.js)
But I can't figure it. Is it possible doing this in a simple way?
////////EDIT////////
I tried all the proposed solutions, but I'm doing something wrong and got errors. This is my routes.js in case it helps:
/**
* Main application routes
*/
'use strict';
import errors from './components/errors';
import path from 'path';
export default function(app) {
// Insert routes below
app.use('/api/cpd', require('./api/cpd'));
app.use('/api/categories', require('./api/category'));
app.use('/api/terms', require('./api/term'));
app.use('/api/qae', require('./api/qae'));
app.use('/api/stats', require('./api/stat'));
app.use('/api/tags', require('./api/tag'));
app.use('/api/questions', require('./api/question'));
app.use('/api/things', require('./api/thing'));
app.use('/api/users', require('./api/user'));
app.use('/auth', require('./auth'));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// All undefined asset or api routes should return a 404
app.route('/:url(api|auth|components|app|bower_components|assets)/*')
.get(errors[404]);
// All other routes should redirect to the index.html
app.route('/*')
.get((req, res) => {
res.sendFile(path.resolve(app.get('appPath') + '/index.html'));
});
}
You can do the following:
var app = express();
var routes = require('./routes/index');
app.set('base', '/qae');
then you need to add route
app.use('/qae', routes);
Hope this helps :)
You should change your rooting to this:
app.use('/qae',require('./routes'))
and in routes/index.js you can have all declarations of your routes.
In routes.js
export default function(app) {
// Insert routes below
app.use('/qae', require('./api'));
app.use('/auth', require('./auth'));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// All undefined asset or api routes should return a 404
app.route('/:url(api|auth|components|app|bower_components|assets)/*')
.get(errors[404]);
// All other routes should redirect to the index.html
app.route('/*')
.get((req, res) => {
res.sendFile(path.resolve(app.get('appPath') + '/index.html'));
});
}
create file index.js in api
const express = require('express')
const router = express.Router()
router.use('/api/cpd', require('./cpd'));
router.use('/api/categories', require('./category'));
router.use('/api/terms', require('./term'));
router.use('/api/qae', require('./qae'));
router.use('/api/stats', require('./stat'));
router.use('/api/tags', require('./tag'));
router.use('/api/questions', require('./question'));
router.use('/api/things', require('./thing'));
router.use('/api/users', require('./user'));
module.exports = router
That way all your api routes will look like /qae/api/*. If you need auth also after this prefix you need to do it same way.
Best solution is to have i app.use('/',...) including routers from subfolders.
If your ./routes module returned a router instead of taking an app object, then you could do this to make it available in / route:
app.use(require('./routes'));
or this to use /qae prefix:
app.use('/qae', require('./routes'));
but since you pass the app object to the function exported by ./routes then it is the ./routes module that actually registers the routes and since you didn't include its code it's hard to give you a specific example. I can only say that you will need to change the routes definitions in ./routes for a different prefix, and you'd need to return a router instead of taking app argument for the above examples to work.
Tthen you ./routes would have to look like this:
let express = require('express');
let router = express.Router();
router.get('/xxx', (req, res) => {
// ...
});
router.get('/yyy', (req, res) => {
// ...
});
module.exports = router;
and only then you'll be able to use:
app.use('/qae', require('./routes'));
in the main code.
Folder Structure
bin/
www
server/
routes/
index.js
book.js
views/
index.ejs
app.js
router.js
error.js
public/
package.json
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
require('./router')(app);
require('./errors')(app);
module.exports = app;
route.js
var index = require('./routes/index');
var books = require('./routes/books');
var base = '/api';
module.exports = function (app) {
app.use(base+'/', index);
app.use(base+'/books', books);
};
error.js
module.exports = function (app) {
app.use(function (req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function (err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
app.use(function (err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
};
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;

Request left hanging in express middleware despite next call

I have written simple express middleware to parse files and add them to req. It looks like this.
import formidable from 'formidable';
export const parseForm = (req, res, next) => {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
if(err) {
next(err);
}
req.files = files; // eslint-disable-line
next();
});
};
I'm adding it to app like this(along with other middleware).
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.use(parseForm);
// static paths
const publicPath = express.static(path.join(__dirname, '../client/public'));
app.use(publicPath);
// routes
app.use('/api', adminRoutes);
app.use('/api', ingredientRoutes);
app.use('/api', productRoutes);
My problem is that despite calling next function in middleware my request is left hanging. Is next supposed to pass some arguments or maybe I'm passing my middleware in wrong fashion?
Thanks for help.
Turns out you can't use body-parser and formidable simultaneously. I resigned from body-parser and added to my middleware
req.body = fields;

Resources