Question

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

文件树

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

Answer 1

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

关于在HTML中使用“ ../otherFunctions.js”，恐怕浏览器会尝试解析相对于HTML文件本身位置的路径，例如，如果HTML文件为{ {1}}，浏览器将寻找my.domain.com/foo/bar/index.html。理想情况下，您要提供给客户端的所有静态文件应放在一个文件夹中，然后由my.domain.com/foo/otherFunctions.js调用使用。

解决NodeJS / Express中的相对路径

1 个答案: