防爆preSS节点担任pushState的启用服务器服务于任何静态资源没有任何路径preFIX [英] Express node worked as pushState enabled server serve any static resource without any path prefix

问题描述

我建设有Ember.js或Backbone.js的单个页面的Web应用程序作为前端MVC，前press.js（node.js的）作为后端服务器。

I am building a single page web application with Ember.js or Backbone.js as front end MVC, express.js(node.js) as back end server.

的服务器/ app.js 的code总之

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) )
});

这将加载了的客户端/ 的所有的公共资产的文件夹，客户端文件夹结构看起来像这样

It will load up the client/ folder with all the public assets, client folder structure looks like this

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

在HTML5 pushState的由前端MVC，前preSS服务器启用始终服务于所有匹配的路由为好，这反过来又使index.html作为始终刷新页面时或URL被手动插入在浏览器中。

When html5 pushstate is enabled by front end MVC, express server is always serving all the matching route as well, which in turn render index.html as always when page is refreshed or url is being manually inserted in the browser.

的客户端/ index.html的的（样品code）

<link rel="stylesheet" href="assets/styles/reset.css">
<link rel="stylesheet" href="assets/styles/base.css">

下面是三种不同的URL的情况下

Here are three different URLs cases

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

当我定义的静态资源的相对路径，它的工作原理与根URL和页面刷新硬URL匹配的路径，它服务资源

When I defined any static resource as relative path, it works on matching path with root url and hard url on page refresh, it serves resources as

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

但是，当我到本地主机：3000 /用户/ 1 并刷新页面，我得到了错误的资源的URL，因此它失败的加载客户机/ index.html的因为没有资源的路径。

But when I got to localhost:3000/users/1 and refresh the page, I got the wrong resource url, so it failed on loading client/index.html since there are no resources in that path.

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

然后我切换到绝对路径
的客户端/ index.html的的（样品code）

<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/base.css">

它运作良好，即使在动态段网址本地主机：3000 /用户/ 1 ，所有资源在正确的URL路径服务。但我有一个HTML IMG 标记＆LT; IMG SRC =资产/图像/图标/ star.pngALT =明星＆GT; 在前端MVC模板将在应用程序启动时，呈现了。当我加载了本地主机：3000 /用户/ 1 在页面刷新，这里是我得到

it works well even in the dynamic segment url localhost:3000/users/1, all resource serve in the correct url path. but I have an html img tag <img src="assets/images/icons/star.png" alt="star"> in front end mvc template which will be rendered when application boots up. When I load up localhost:3000/users/1 on page refresh, here is what I get

GET /assets/styles/reset.css 304 1ms
GET /assets/styles/base.css 304 2ms
GET /users/assets/images/icons/star.png 304 5ms

我试着在前端MVC模板（绝对路径和相对路径＆LT; IMG SRC =/资产/图像/图标/ star.pngALT =明星＆GT; ），它加载与用户 preFIX不管。

I tried with absolute path and relative path in front end mvc template (<img src="/assets/images/icons/star.png" alt="star">), it loads with users prefix no matter what.

我发现通过 tbranyen 一个解决方案，但它确实不太为我工作。我并不需要安装在所有的群集，我要的是我的前preSS服务器提供任何资源，没有任何preFIX当任何动态段被匹配。所以我写了这个中间件，它触发正确的，但仍与加载用户/ preFIX静态资源。

I found a solution by tbranyen, but it did not quite work for me. I do not need to setup any cluster at all, what I want is my express server to serve any resource without any prefix when any dynamic segment is being matched. So I wrote this middleware, and it fires correct but still loads the static resource with users/ prefix.

// this route uses the ":user" named parameter
// which will cause the 'user' param callback to be triggered
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');
});

问题：

在使用前press.js作为服务器，我想每一个浏览器请求将响应客户端/ index.html的，即使动态查询段处理。目前，无论何时URL查询涉及与动态查询段 /用户/：USER_ID ，由前preSS服务器响应将preFIX与用户来所有的静态资源。

When using Express.js as a server, I want every browser request will be handled with response client/index.html, even with dynamic query segment. Currently, whenever url query involves with dynamic query segment /users/:user_id, the response from express server will prefix with users to all the static resources.

例如，当我加载与动态段链接本地主机：3000 /用户/ 1 。如果我有一个资源资产/车把中的模板图像/图标/ star.png ，前preSS服务器响应返回 /用户/资产/与资产图像/图标/ star.png ，但我没有用户文件夹中。我想回响应 /assets/images/icons/star.png 。

For example, when I load the url with dynamic segment localhost:3000/users/1. if i have a resources assets/images/icons/star.png in handlebars template, express server response back /users/assets/images/icons/star.png, but I do not have users folder with the assets. What I want response back /assets/images/icons/star.png.

我试着用绝对路径 /assets/images/icons/star.png 或相对路径资产/图像/图标/ star.png 在车把上的模板，它总是与回报用户 preFIX在响应中。

I tried with absolute path /assets/images/icons/star.png or relative path assets/images/icons/star.png in the handlebars template, it always return with users prefix in the response.

感谢您的帮助！

推荐答案

在＆LT; HEAD＆GT; 你的基地的模板，添加此向顶部：

In the <head> of your base template, add this toward the top:

<base href="/">

这篇关于防爆preSS节点担任pushState的启用服务器服务于任何静态资源没有任何路径preFIX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！