Le nœud Express a fonctionné comme un serveur activé par PushState servant toute ressource statique sans préfixe de chemin

Je construis une application Web à page unique avec Ember.js ou Backbone.js en tant que serveur frontal MVC, express.js (node.js) en tant que serveur principal.

code serveur / app.js en bref

app.use(bodyParser.json()); app.use(express.static(path.join(__dirname, '..', 'client'))); app.get('*', function(req, res) { return res.render('base'); (will sendFile (client/index.html) ) }); 

Il va charger le client / dossier avec tous les actifs publics, la structure de dossiers du client ressemble à ceci

 - client -- index.html ( will be rendered as always ) -- app (front end mvc code) -- assets -- images -- styles 

Lorsque html5 pushstate est activé par MVC frontal, Express Server sert également toutes les routes correspondantes, qui rendent à leur tour index.html, comme toujours, lorsque la page est actualisée ou que l’URL est insérée manuellement dans le navigateur.

client / index.html (exemple de code)

   

Voici trois cas d’URL différents

 localhost:3000/ (root) localhost:3000/users || localhost:3000/#/users (hard url) localhost:3000/users/1 || localhost:3000/#/users/1 ( dynamic segment) 

Lorsque je définis une ressource statique en tant que chemin relatif, cela fonctionne sur le chemin correspondant avec l’URL racine et l’URL physique lors de l’actualisation de la page.

 GET /assets/styles/reset.css 304 1ms GET /assets/styles/base.css 304 2ms 

Mais lorsque je suis arrivé sur localhost:3000/users/1 et que j’ai actualisé la page, j’ai eu une mauvaise URL de ressource. Le chargement de client/index.html échoué, car aucune ressource ne se trouve dans ce chemin.

 GET /users/assets/styles/reset.css 304 2ms GET /users/assets/styles/base.css 304 6ms 

Puis je suis passé au chemin absolu dans client / index.html (exemple de code)

   

cela fonctionne bien même dans le segment dynamic url localhost:3000/users/1 , toutes les ressources servent dans le chemin d’URL correct. mais j’ai un tag html img star dans le modèle mvc frontal qui sera rendu lors du démarrage de l’application. Lorsque je charge localhost:3000/users/1 sur la page d’actualisation, voici ce que je reçois

 GET /assets/styles/reset.css 304 1ms GET /assets/styles/base.css 304 2ms GET /users/https://stackoverflow.com/questions/25062002/express-node-worked-as-pushstate-enabled-server-serve-any-static-resource-withou/assets/images/icons/star.png 304 5ms 

J’ai essayé avec un chemin absolu et un chemin relatif dans le modèle mvc ( star ), il se charge avec le préfixe des users peu importe le choix.

J’ai trouvé une solution par tbranyen , mais cela n’a pas tout à fait fonctionné pour moi. Je n’ai pas du tout besoin de configurer un cluster. Ce que je veux, c’est que mon serveur express serve toutes les ressources sans préfixe lorsqu’un segment dynamic est mis en correspondance. J’ai donc écrit ce middleware et il se déclenche correctement, mais charge toujours la ressource statique avec le préfixe users/ .

 // this route uses the ":user" named parameter // which will cause the 'user' param callback to be sortingggered router.get('/users/:user_id', function(req, res, next) { console.log('req.params: ', req.params.user_id ); //console.log('@TODO: need to handle the params here'); //next(); return res.render('base'); }); 

Problème:

Lorsque vous utilisez Express.js en tant que serveur, je souhaite que chaque requête du navigateur soit traitée avec le paramètre response client/index.html , même avec le segment de requête dynamic. Actuellement, chaque fois que la requête url implique une requête dynamic segment /users/:user_id , la réponse du serveur express préfixe les users à toutes les ressources statiques.

Par exemple, lorsque je charge l’URL avec le segment dynamic localhost:3000/users/1 . si j’ai un ressources https://stackoverflow.com/questions/25062002/express-node-worked-as-pushstate-enabled-server-serve-any-static-resource-withou/assets/images/icons/star.png dans le modèle de guidon, exprimez la réponse du serveur en retour https://stackoverflow.com/questions/25062002/express-node-worked-as-pushstate-enabled-server-serve-any-static-resource-withou/assets/images/icons/star.png /users/https://stackoverflow.com/questions/25062002/express-node-worked-as-pushstate-enabled-server-serve-any-static-resource-withou/assets/images/icons/star.png , mais je n’ai pas de dossier d’ users avec les actifs. Ce que je veux réponse /https://stackoverflow.com/questions/25062002/express-node-worked-as-pushstate-enabled-server-serve-any-static-resource-withou/assets/images/icons/star.png .

J’ai essayé avec le chemin absolu /https://stackoverflow.com/questions/25062002/express-node-worked-as-pushstate-enabled-server-serve-any-static-resource-withou/assets/images/icons/star.png ou le chemin relatif https://stackoverflow.com/questions/25062002/express-node-worked-as-pushstate-enabled-server-serve-any-static-resource-withou/assets/images/icons/star.png dans le modèle de guidon, il est toujours renvoyé avec le préfixe de l’ users dans la réponse.

Merci pour toute aide!

Dans la de votre modèle de base, ajoutez ceci vers le haut: