I'm a newbie on express, and when I was creating a simple server demo I detected that POST requests were not sent. After doing some experiments I discovered that it was the express.static middleware, that somehow was interfering. I supposed it was a common error, but didn't manage to find a clue. My code is the following:
//jshint esversion:6
import express from "express";
import path from "path";
import { fileURLToPath } from "url";
import bodyParser from "body-parser";
import https from "https";
/* jshint ignore:start */
const __filename = fileURLToPath(import.meta.url);
/* jshint ignore:end */
const __dirname = path.dirname(__filename);
const app = express();
const port = 8080;
app.use(express.static(__dirname + "/public"));
app.use("/", bodyParser.urlencoded({ extended: true }));
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
app.post("/", function (req, res) {
let name = req.body.name;
let email = req.body.email;
let message = req.body.message;
res.send("POST request to the homepage");
console.log(req.body);
});
app.listen(port, () => console.log(`Listening on port ${port}!`));
I'll gladly appreciate any answer or commet :)
EDIT: Apparently this error doesn't occur on Firefox, but does on Chrome and Edge
Based on your symptoms of the POST not even being sent from the client when you added the express.static(), I would guess that when you go to the / route in your browser, that express.static() was picking up an index.html from your public directory rather than the index.html that you wanted from here:
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
You can fix that two ways. Either move this app.get("/", ...) route before the express.static() route or tell the express.static route to NOT serve index.html like this:
// set up static file handling, but don't serve index.html for the / request
app.use(express.static(__dirname + "/public", {index: false}));
Ok figured out what was really blocking this.
When adding express.static() it loaded the JS for the front-end, which has the following line:
$(".sendMessageBtn").attr("disabled", "true");
which disables the submit button. Turns out disabling it also means it can't send anything BUT only on chromium browsers. This does not happen on Firefox.
To disable it without causing this mess, you can replace with:
$(".sendMessageBtn").css("pointer-events", "none");
Instead of disabling it through HTML, it uses CSS
So the way express static file serving works is that you put a /path which you want to serve on, and the term express.static(/path/to/static/folder) which will be published to the api.
Otherwise your entire application will be static, due to the fact that everything start with /.
See the docs for more info.
In your case:
app.use("/your-static-endpoint", express.static(__dirname + "/public"));
One more thing about your code. Stuff like static serving, error handling, body parsing are called middlewares, so if you want to apply them through the application, you shouldn't specify a path, because it might interfere with how express handles routing.
I have a project based on express with a required authentication based on passport.
The backoffice is an angularjs app served as static files.
My authentication code is completly based on https://github.com/jaredhanson/passport-local/blob/master/examples/express3-no-connect-flash/app.js
To do not serve the angular app if you are not authenticated. I have try by adding ensureAuthenticated on the /admin route but it make the route not working (404). Once I remove ensureAuthenticated the /admin is served.
app.use(express.static(path.join(__dirname, 'public')));
app.use('/admin', ensureAuthenticated, express.static(path.join(__dirname, 'admin')));
//serve routes
app.use(app.router);
The public folder contains the login page.
How could I achieve this ?
Ran into same issue, this is what I ended up doing!
app.use doesn't let you chain middlewares in that way. The various
app.VERB functions do, but app.use doesn't. That's for one middleware
at a time.
If you split the 2 middlewares out into separate calls, you should get
the results you want:
app.use('/admin', ensureAuthenticated);
app.use('/admin', express.static(path.join(__dirname, 'admin')));
Cannot use basic authentication while serving static files using express
You can check the route using middleware and redirect them if they aren't logged in and are hitting admin pages, something like (untested):
app.use(function(req, res, next) {
if (req.user == null && req.path.indexOf('/admin') === 0)
{
res.redirect('/login');
}
next();
});
app.use('/admin', function(req,res,next){
if(req.user){
return express.static(path.join(__dirname, 'public'));
} else {
res.render(403, 'login', {message:'Please, login!'});
}
});
//serve routes
app.use(app.router);
Update for express#4.16.4+, passport-jtw#0.4.0, and passport-jwt#4.0.0
First setup a passport auth strategy. If you use a jwt, you can take a token from a query parameter, if not you can use another Extract function (or multiple using Jwt.ExtractJwt.fromExtractors())
passport.use('basic-user',
new Jwt.Strategy({
...jwtConfig.options,
jwtFromRequest: Jwt.ExtractJwt.fromUrlQueryParameter('token')
}, verifyUser)
);
Then you can use a passport authenticate function before serving static files
app.use('/files', [
passport.authenticate(['basic-user'], { session: false }),
express.static(path.join(__dirname, 'files')) //make sure you access proper directory
])
You could also chain middlewares as an array to achieve this goal:
app.use('/admin', [ensureAuthenticated, express.static(path.join(__dirname, 'admin'))]);
The accepted answer felt a bit partial (and may not work in some cases), so here's a bit more verbose and generalized answer:
// Here we'll attach the user object. The correct ordering
// of these middleware functions is important.
app.use(
'/some-restricted-static-path',
passport.authenticate("bearer", { session: false })
);
// As the user object should now be attached (if authorized), we can now
// verify it to be so.
app.use('/some-restricted-static-path', (req, res, next) => {
if (!!req.user) {
// The user exists, we can continue.
// Here you can also validate the role etc if necessary.
next();
} else {
// No user object found, terminate the pipeline with .end().
res.status(401).end();
}
});
// And finally, here's the actual handler that won't be accessed if
// something went wrong earlier.
app.use(
'/some-restricted-static-path',
express.static(
path.join(
__dirname,
"../dist/attachments"
)
)
);
Explanation: In Express, the middleware is processed one-by-one. If one of the middleware terminate the process, every middleware after it will be skipped. So, knowing this, we can first attach the user object, then validate it, and finally either grant or deny access.
Is there a useful difference between app.all("*", … ) and app.use("/", … ) in Express.js running on Node.js?
In most cases they would work equivalently. The biggest difference is the order in which middleware would be applied:
app.all() attaches to the application's router, so it's used whenever the app.router middleware is reached (which handles all the method routes... GET, POST, etc).
NOTICE: app.router has been deprecated in express 4.x
app.use() attaches to the application's main middleware stack, so it's used in the order specified by middleware, e.g., if you put it first, it will be the first thing to run. If you put it last, (after the router), it usually won't be run at all.
Usually, if you want to do something globally to all routes, app.use() is the better option. Also, it has less chance of future bugs, since express 0.4 will probably drop the implicit router (meaning, the position of the router in middleware will be more important than it is right now, since you technically don't even have to use it right now).
app.use takes only one callback function and it's meant for Middleware. Middleware usually doesn't handle request and response, (technically they can) they just process input data, and hand over it to next handler in queue.
app.use([path], function)
app.all takes multiple callbacks, and meant for routing. with multiple callbacks you can filter requests and send responses. Its explained in Filters on express.js
app.all(path, [callback...], callback)
app.use only sees whether url starts with the specified path
app.use( "/product" , mymiddleware);
// will match /product
// will match /product/cool
// will match /product/foo
app.all will match complete path
app.all( "/product" , handler);
// will match /product
// won't match /product/cool <-- important
// won't match /product/foo <-- important
app.all( "/product/*" , handler);
// won't match /product <-- Important
// will match /product/
// will match /product/cool
// will match /product/foo
app.use:
inject middlware to your front controller configuring for instance: header, cookies, sessions, etc.
must be written before app[http_method] otherwise there will be not executed.
several calls are processed in the order of writing
app.all:
(like app[http_method]) is used for configuring routes' controllers
"all" means it applies on all http methods.
several calls are processed in the order of writing
Look at this expressJs code sample:
var express = require('express');
var app = express();
app.use(function frontControllerMiddlewareExecuted(req, res, next){
console.log('(1) this frontControllerMiddlewareExecuted is executed');
next();
});
app.all('*', function(req, res, next){
console.log('(2) route middleware for all method and path pattern "*", executed first and can do stuff before going next');
next();
});
app.all('/hello', function(req, res, next){
console.log('(3) route middleware for all method and path pattern "/hello", executed second and can do stuff before going next');
next();
});
app.use(function frontControllerMiddlewareNotExecuted(req, res, next){
console.log('(4) this frontControllerMiddlewareNotExecuted is not executed');
next();
});
app.get('/hello', function(req, res){
console.log('(5) route middleware for method GET and path patter "/hello", executed last and I do my stuff sending response');
res.send('Hello World');
});
app.listen(80);
Here is the log when accessing route '/hello':
(1) this frontControllerMiddlewareExecuted is executed
(2) route middleware for all method and path pattern "*", executed first and can do stuff before going next
(3) route middleware for all method and path pattern "/hello", executed second and can do stuff before going next
(5) route middleware for method GET and path patter "/hello", executed last and I do my stuff sending response
With app.use(), the "mount" path is stripped and is not visible to the middleware function:
app.use('/static', express.static(__dirname + '/public'));
Mounted middleware functions(express.static) are not invoked unless the req.url contains this prefix (/static), at which point it is stripped when the function is invoked.
With app.all(), there is no that behavior.
Yes, app.all() gets called when a particular URI is requested with any type of request method (POST, GET, PUT, or DELETE)
On other hand app.use() is used for any middleware you might have and it mounts onto a path prefix, and will be called anytime a URI under that route is requested.
Here is the documentation for app.all & app.use.
Two differences all above answers don't mention.
The first one:
app.all accepts a regex as its path parameter. app.use does NOT accept a regex.
The second one:
app.all(path, handler) or app[method](path, handler) handlers' path must be same to all path. This is, app[method] path is complete.
app.use(path, handler), if use's path is complete, the handler's path must be /. If the use's path is the start of the complete path, the handler path must be the rest of the complete path.
app.use("/users", users);
//users.js: the handler will be called when matchs `/user/` path
router.get("/", function (req, res, next) {
res.send("respond with a resource");
});
// others.js: the handler will be called when matches `/users/users` path
router.get("/users", function (req, res, next) {
res.send("respond with a resource");
});
app.all("/users", users);
//others.js: the handler will be called when matches `/`path
router.get("/", function (req, res, next) {
res.send("respond with a resource");
});
//users.js: the handler will be called when matches `/users` path
router.get("/users", function (req, res, next) {
res.send("respond with a resource");
});
There are two main differences:
1. pattern matching (answer given by Palani)
2. next(route) won't work inside the function body of middleware loaded using app.use . This is stated in the link from the docs:
NOTE: next('route') will work only in middleware functions that were loaded by using the app.METHOD() or router.METHOD() functions.
Link: http://expressjs.com/en/guide/using-middleware.html
The working effect of next('route') can be seen from the following example:
app.get('/',
(req,res,next)=>{console.log("1");
next(route); //The code here skips ALL the following middlewares
}
(req,res,next)=>{next();}, //skipped
(req,res,next)=>{next();} //skipped
);
//Not skipped
app.get('/',function(req,res,next){console.log("2");next();});
In the docs for the NodeJS express module, the example code has app.use(...).
What is the use function and where is it defined?
The app object is instantiated on creation of the Express server. It has a middleware stack that can be customized in app.configure()(this is now deprecated in version 4.x).
To setup your middleware, you can invoke app.use(<specific_middleware_layer_here>) for every middleware layer that you want to add (it can be generic to all paths, or triggered only on specific path(s) your server handles), and it will add onto your Express middleware stack. Middleware layers can be added one by one in multiple invocations of use, or even all at once in series with one invocation.
See use documentation for more details.
To give an example for conceptual understanding of Express Middleware, here is what my app middleware stack (app.stack) looks like when logging my app object to the console as JSON:
stack:
[ { route: '', handle: [Function] },
{ route: '', handle: [Function: static] },
{ route: '', handle: [Function: bodyParser] },
{ route: '', handle: [Function: cookieParser] },
{ route: '', handle: [Function: session] },
{ route: '', handle: [Function: methodOverride] },
{ route: '', handle: [Function] },
{ route: '', handle: [Function] } ]
As you might be able to deduce, I called app.use(express.bodyParser()), app.use(express.cookieParser()), etc, which added these express middleware 'layers' to the middleware stack. Notice that the routes are blank, meaning that when I added those middleware layers I specified that they be triggered on any route. If I added a custom middleware layer that only triggered on the path /user/:id that would be reflected as a string in the route field of that middleware layer object in the stack printout above.
Each layer is essentially adding a function that specifically handles something to your flow through the middleware.
E.g. by adding bodyParser, you're ensuring your server handles incoming requests through the express middleware. So, now parsing the body of incoming requests is part of the procedure that your middleware takes when handling incoming requests -- all because you called app.use(bodyParser).
Each app.use(middleware) is called every time a request is sent to the server.
use is a method to configure the middleware used by the routes of the Express HTTP server object. The method is defined as part of Connect that Express is based upon.
Update Starting with version 4.x, Express no longer depends on Connect.
The middleware functions that were previously included with Express are now in separate modules; see the list of middleware functions.
app.use() acts as a middleware in express apps. Unlike app.get() and app.post() or so, you actually can use app.use() without specifying the request URL. In such a case what it does is, it gets executed every time no matter what URL's been hit.
app.use() used to Mounts the middleware function or mount to a specified path,the middleware function is executed when the base path matches.
For example:
if you are using app.use() in indexRouter.js , like this:
//indexRouter.js
var adsRouter = require('./adsRouter.js');
module.exports = function(app) {
app.use('/ads', adsRouter);
}
In the above code app.use() mount the path on '/ads' to adsRouter.js.
Now in adsRouter.js
// adsRouter.js
var router = require('express').Router();
var controllerIndex = require('../controller/index');
router.post('/show', controllerIndex.ads.showAd);
module.exports = router;
in adsRouter.js, the path will be like this for ads- '/ads/show', and then it will work according to controllerIndex.ads.showAd().
app.use([path],callback,[callback]) :
we can add a callback on the same.
app.use('/test', function(req, res, next) {
// write your callback code here.
});
app.use() handles all the middleware functions.
What is middleware?
Middlewares are the functions which work like a door between two all the routes.
For instance:
app.use((req, res, next) => {
console.log("middleware ran");
next();
});
app.get("/", (req, res) => {
console.log("Home route");
});
When you visit / route in your console the two message will be printed. The first message will be from middleware function. If there is no next() function passed then only middleware function runs and other routes are blocked.
app.use(function middleware1(req, res, next){
// middleware1 logic
}, function middleware2(req, res, next){
// middleware2 logic
}, ... middlewareN);
app.use is a way to register middleware or chain of middlewares (or multiple middlewares) before executing any end route logic or intermediary route logic depending upon order of middleware registration sequence.
Middleware: forms chain of functions/middleware-functions with 3 parameters req, res, and next. next is callback which refer to next middleware-function in chain and in case of last middleware-function of chain next points to first-middleware-function of next registered middlerare-chain.
app.use() works like that:
Request event trigered on node http server instance.
express
does some of its inner manipulation with req object.
This is when
express starts doing things you specified with app.use
which very simple.
And only then express will do the rest of the stuff like routing.
The .use() method in express is a *middleware handler. An Express application is essentially a series of middleware function calls.
An Express application can use 5 different types of middleware, of which these two are majorly used:
Application-level middleware
Router-level middleware
App.use() is used to bind *application-level middleware to an instance of the app object which is instantiated on the creation of the Express server (router.use() for router-level middleware).
Syntax : app.use(path, middleware function/s)
Here, the path is optional. When no path is specified the function gets executed every time the app receives a request, irrespective of which URL has been hit.
*Example:
Auth middleware - In a To-Do app, once an already created user logs in, he is provided with a JWT token, which must be verified every time the user makes a GET, PUT, PATCH, POST or DELETE request.
app.use("/api/*", verifyToken(req, res, next): void {
const jwt: string = req.headers['x-token-header'];
if (!jwt) {
res.status(403).send({ message: 'No token provided!' });
} else {
jsonwebtoken.verify(jwt, config.get('secretString'), (err) => {
if (err) {
res.status(403).send(err);
} else {
next();
}
});
});
Here, the path /api has been added to differentiate from requests that do not need a JWT authentication such as sign up and log in (since we don't want the middleware to be executed when there's no need for authentication).
*Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.
Syntax of a middleware: function(req, res, next)
In express if we
import express from "express"
and use app = express();
then app having all functionality of express
if we use app.use()
with any module/middleware function to use in whole express project
app.use is woks as middleware for app request.
syntax
app.use('pass request format',function which contain request response onject)
example
app.use('/',funtion(req,res){
console.log(all request pass through it);
// here u can check your authentication and other activities.
})
also you can use it in case of routing your request.
app.use('/', roting_object);
app.use is a function requires middleware. For example:
app.use('/user/:id', function (req, res, next) {
console.log('Request Type:', req.method);
next();
});
This example shows the middleware function installed in the /user/:id path. This function is executed for any type of HTTP request in the /user/:id path.
It is similar to the REST Web Server, just use different /xx to represent different actions.
app.use() is a method that allows us to register a middleware.
The middleware method is like an interceptor in java, this method always executes for all requests.
Purpose and use of middleware:-
To check if the session expired or not
for user authentication and authorization
check for cookie (expiry date)
parse data before the response
Middleware is a general term for software that serves to "glue together" so
app.use is a method to configure the middleware, for example: to parse and handle the body of request:
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
there are many middlewares you can use in your express application
just read the doc :
http://expressjs.com/en/guide/using-middleware.html
app.use applies the specified middleware to the main app middleware stack. When attaching middleware to the main app stack, the order of attachment matters; if you attach middleware A before middleware B, middleware A will always execute first. You can specify a path for which a particular middleware is applicable. In the below example, “hello world” will always be logged before “happy holidays.”
const express = require('express')
const app = express()
app.use(function(req, res, next) {
console.log('hello world')
next()
})
app.use(function(req, res, next) {
console.log('happy holidays')
next()
})
It enables you to use any middleware (read more) like body_parser,CORS etc. Middleware can make changes to request and response objects. It can also execute a piece of code.
You can also create your own middleware function like
app.use( function(req, res, next) {
// your code
next();
})
It contains three parameters req, res, next
You can also use it for authentication and validation of input params to keep your
controller clean.
next() is used for go to next middleware or route.
You can send the response from middleware
app.use is Application level middleware
Bind application-level middleware to an instance of the app object by using the app.use() and app.METHOD() functions, where METHOD is the HTTP method of the request that the middleware function handles (such as GET, PUT, or POST) in lowercase.
you can use to check all requests, for example, you want to check token/access token you need to write a middleware by using app.use to check the token in the request.
This example shows a middleware function with no mount path. The function is executed every time the app receives a request.
var app = express()
app.use(function (req, res, next) {
console.log('Time:', Date.now())
next()
})
reference from https://expressjs.com/en/guide/using-middleware.html
app.use(path, middleware) is used to call middleware function that needs to be called before the route is hit for the corresponding path. Multiple middleware functions can be invoked via an app.use.
app.use(‘/fetch’, enforceAuthentication) -> enforceAuthentication middleware fn will be called when a request starting with ‘/fetch’ is received. It can be /fetch/users, /fetch/ids/{id}, etc
Some middleware functions might have to be called irrespective of the request. For such cases, a path is not specified, and since the the path defaults to / and every request starts with /, this middleware function will be called for all requests.
app.use(() => { // Initialize a common service })
next() fn needs to be called within each middleware function when multiple middleware functions are passed to app.use, else the next middleware function won’t be called.
reference : http://expressjs.com/en/api.html#app.use
Note: The documentation says we can bypass middleware functions following the current one by calling next('route') within the current middleware function, but this technique didn't work for me within app.use but did work with app.METHOD like below. So, fn1 and fn2 were called but not fn3.
app.get('/fetch', function fn1(req, res, next) {
console.log("First middleware function called");
next();
},
function fn2(req, res, next) {
console.log("Second middleware function called");
next("route");
},
function fn3(req, res, next) {
console.log("Third middleware function will not be called");
next();
})
app.use(req, res, next) is an API that allows us to add one or more middlewares to the request pipeline of express. A middleware is a function that has a defined signature, and through that, you can modify or end the request, returning a response according to a condition that you program. For example, I can call res.end() and finish the request to the client. Middlewares are executed in the order they're added. I can simply decorate the req object, adding or removing properties, for example, authenticating an user and setting req.user = 'any user of database', and calling next(), the next middleware will begin its execution, receiving the same instance of req, res, next.
Bind application-level middleware to an instance of the app object by using the app.use() and app.METHOD() functions, where METHOD is the HTTP method of the request that the middleware function handles (such as GET, PUT, or POST) in lowercase.
In short app.use() supports all type of requests [eg:get,post,...]
so its mostly used to setup middelware.
or can be used for when the routes and functions seperated
example:
app.use("/test",functionName)
and functionName is located in different file
app.use
is created by express(nodejs middleware framework )
app.use is use to execute any specific query at intilization process
server.js(node)
var app = require('express');
app.use(bodyparser.json())
so the basically app.use function called every time when server up
You can use app.use('/apis/test', () => {...}) for writing middleware for your api, to handle one or some action (authentication, validation data, validation tokens, etc) before it can go any further or response with specific status code when the condition that you gave was not qualified.
Example:
var express = require('express')
var app = express()
app.use(function (req, res, next) {
// Your code to handle data here
next()
})
More detail is, this part actually an anonymous function for you to write the logic on runtime
function (req, res, next) {
// Your code to handle data here
next()
}
You can split it into another function from another file and using module.export to use
next() here for the logic that if you handle everything is fine then you can use then for the program to continue the logic that its used to.
The app.use() function is used to mount the specified middleware function(s) at the path which is being specified. It is mostly used to set up middleware for your application.
Syntax
app.use(path, callback)
Parameters:
path: It is the path for which the middleware function is being called. It can be a string representing a path or path pattern or regular expression pattern to match the paths.
callback: It is a middleware function or a series/array of middleware functions.
In simple words app.use() is a function that takes another function (callback) as a parameter and runs every time, when the request is sent to the express app/server.
The function passed inside app.use is also called middleware, middleware is just a fancy name for a function that exists in express app and has three parameters request, response and next. You can read more about middleware.
Middleware are called between request and response cycle. If you want a middleware to be applied on all the routes then you can use app.use() or do some validation, error checking and other things.
app.use() will be called for every request: GET, POST, PUT, PATCH, DELETE
Let's say we have a set of routes that our site can handle
app.get('/1/', function(req, res) {
res.send('page1');
});
app.get('/2/', function(req, res) {
res.send('page2');
});
Obviously, if an address is requested that we do not process, then a 404 error should be returned. Express, however, does not do this by default. But it's easy to implement.
The special method app.use will help us with this. It allows you to intercept all raw addresses
Let's use this method to return a 404 error
app.use(function(req, res) {
res.status(404).send('not found');
});
Now let's place our construction after all app.get
app.get('/1/', function(req, res) {
res.send('page1');
});
app.get('/2/', function(req, res) {
res.send('page2');
});
app.use(function(req, res) {
res.status(404).send('not found');
});
As the name suggests, it acts as a middleware in your routing.
Let's say for any single route, you want to call multiple url or perform multiple functions internally before sending the response.
you can use this middleware and pass your route and perform all internal operations.
syntax:
app.use( function(req, res, next) {
// code
next();
})
next is optional, you can use to pass the result using this parameter to the next function.
app.use() is the application middleware.
Bind application-level middleware to an instance of the app object by using the app. use() and app. METHOD() functions, where METHOD is the HTTP method of the request that the middleware function handles (such as GET, PUT, or POST)
var express = require('express');
var app = express();
var PORT = 3000;
// This middleware will not allow the
// request to go beyond it
app.use(function (req, res, next) {
console.log("Middleware called")
next();
});
// Requests will never reach this route
app.get('/user', function (req, res) {
console.log("/user request called");
res.send('Hello test');
});
app.listen(PORT, function(err){
if (err) console.log(err);
console.log("Server listening on PORT", PORT);
});