解析 NodeJS/Express 中的相对路径答案

【问题标题】：Resolve relative paths in NodeJS/Express解析 NodeJS/Express 中的相对路径
【发布时间】：2019-02-23 13:32:25
【问题描述】：

我有一个网络调用不同文件夹（主文件夹内部和外部）中的多个脚本、图像、样式等：

文件树

- /
  - website
      - scripts
        - data.js
        - customJquery.js
      - styles
        - animate.css
      index.html
      main.css
      back.jpg
  - otherFunctions.js

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,800,800i">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster+One">
        <link rel="stylesheet" href="styles/animate.css">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <img class="fondo" src="back.jpg">

        <div class="content">
            <!-- stuff... -->
        </div>

        <script src='scripts/data.js'></script>
        <script src='scripts/customJquery.js'></script>
        <script src='../otherFunctions.js'></script> <!-- Here's the conflict... -->
    </body>
</html>

除../otherFunctions.js 外，所有路径都路由正常。似乎 NodeJS/Express 跳过了相关部分 .. 并且只收到了处理错误的 /otherFunctions.js。

这是我的服务器端：

index.js

const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();

const config = require('./config');

var webId;

var options = {
  key: fs.readFileSync(config.paths.certificate.key),
  cert: fs.readFileSync(config.paths.certificate.crt),
  requestCert: false,
  rejectUnauthorized: false
};

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT");
  res.setHeader("Access-Control-Allow-Headers", "Accept, Access-Control-Allow-Headers, Access-Control-Request-Headers, Access-Control-Request-Method, Authorization, Content-Type, Origin, X-Requested-With");
  next();
});

app.get('/favicon.ico', function(req, res) {
  res.status(404).send('No favicon found');
});

app.get('/:id', function(req, res, next) {
  id = req.params.id;

  if (id.search(/\w+\.[A-z]+$/g) < 0) {
    webId = id;
    res.sendFile('index.html', {root: config.paths.webs + id});
  } else {
    res.sendFile(id, {root: config.paths.webs});
  }
});

app.get('/:folder/:file', function(req, res) {
  let folder = req.params.folder;
  let file = req.params.file;

  res.sendFile(file, {root: config.paths.webs + webId + '/' + folder});
});


app.get('*', (request, response) => {
  response.send('GET request not found: ' + request.url);
});


app.use((err, request, response, next) => {
  response.status(500).send(err.message);
});

https.createServer(options, app).listen(443, function() {
  console.clear();
  console.log("NodeJS secure server started at port 443");
});

【问题讨论】：

标签： html node.js express path url-redirection

【解决方案1】：

除非您特别需要以这种方式提供静态文件，否则我建议您使用 express 内置 static file serving。

关于在你的HTML中使用'../otherFunctions.js'，恐怕浏览器会尝试解析相对于HTML文件本身位置的路径，例如，如果HTML文件是@ 987654322@，浏览器将寻找my.domain.com/foo/otherFunctions.js。理想情况下，您要提供给客户端的所有静态文件都应该放在一个文件夹中，然后由express.static(...) 调用使用。

【讨论】：

不幸的是，我不确定我能否改变为元素提供服务的方式。由于我只是在 NodeJS 中创建服务器，因此 Web 位于系统中的特定文件夹中，我无法更改。另一方面，我正在寻找您描述的行为，但我没有在服务器中收到../otherFunctions.js 的调用，只是/otherFunctions.js。
这是因为http://foo.com/../bar 被浏览器自动解析为http://foo.com/bar。恐怕您需要找到一种不同的方式来构建和提供静态文件。
我希望可以，但它不在我的手中......我想我将不得不硬编码一些东西。