静态资源上的错误 404 与获取请求的参数答案

【问题标题】：Error 404 on static ressources whith parameters on get request静态资源上的错误 404 与获取请求的参数
【发布时间】：2017-07-27 21:10:53
【问题描述】：

我正在使用 node.js 做一个生物医学网站，我遇到了一个问题：在我的 app.js（服务器文件）中，我有这些代码

app.get('/disease/:orphanetID', function(req, res) {
var orphanetID=req.params.orphanetID;
res.render('pages/disease.ejs', {activetitle: "views"});
});

问题是 disease.ejs 中所需的所有静态资源都会出现错误 404。

例如对于 disease.ejs 中的这段代码：

<script src="static/js/DOMscripts.js"></script>

在 chrome 控制台中，我看到：

(red cross) GET http://localhost:8080/disease/static/js/DOMscripts.js

问题是，我的静态资源在http://localhost:8080/static/js/DOMscripts.js，只是出现在 URL 中的字符串“disease”......这不是好的 URL！

在测试了一些东西之后，我发现这段代码可以正常工作：

app.get('/disease', function(req, res) {
//var orphanetID=req.params.orphanetID;
res.render('pages/disease.ejs', {activetitle: "views"});
});

所以如果我没有任何参数，它可以工作，但我需要它。

关于信息，我的静态资源代码是：

app.use('/static', express.static(__dirname + '/public'));

我应该怎么做才能有一个参数？

【问题讨论】：

对静态资源使用页面相对 URL 通常是个问题，因为它告诉浏览器在从服务器请求静态资源 URL 之前将页面 URL 的路径添加到静态资源 URL，而这很少是你想要的.设置您的静态资源，使它们都以 / 开头。

标签： javascript node.js parameters static routing

【解决方案1】：

更改脚本路径：

<script src="/static/js/DOMscripts.js"></script>

【讨论】：

【解决方案2】：

为了进一步解释这里发生的情况，当您的静态资源 URL 不以 / 或 //adomain.com/ 或 http://adomain.com/ 开头时，浏览器会将这些 URL 设为相对于页面的 URL。

所以，如果页面 URL 是：

http://adomain.com/disease/194

并且您在页面中有一个资源被指定为：

static/js/DOMscripts.js

然后浏览器将通过将页面的路径与资源的相对 URL 结合起来从服务器请求一个 URL，这样你就会得到一个请求：

http://adomain.com/disease/static/js/DOMscripts.js

但是，您的服务器并不期待这样。您的服务器期待：

http://adomain.com/static/js/DOMscripts.js

因此，要解决此问题，您需要让 URL 以 / 开头。这使得它仅与页面的域相关，而不是页面的路径，并且浏览器将请求您期望的资源的 URL。

【讨论】：