Estaba construyendo un servidor Node.js localmente que escucharía en localhost:8080. La página de destino es un archivo html llamado index.html. Si escribo localhost:8080/index.html, el HTML, junto con el archivo CSS (main.css) y JavaScript (main.js) ubicados en la misma carpeta que index.html se cargarán sin problemas. Pero si escribo la misma URL con una barra al final, como localhost:8080/index.html/, solo carga el html, no el CSS o JS. Intenté ir a la fuente de la página HTML en Chrome y hacer clic en el archivo css allí, y parece buscar un archivo localhost:8080/index.html/main.css (como se ve en la barra de direcciones del navegador), que obviamente no existe . Parece que se asume que index.html es un directorio por alguna razón. Cualquier ayuda sería genial.

Editar: la parte del servidor que se ocupa del enrutamiento se ve así (recién estoy comenzando y estoy tratando de enrutar sin usar Express.js):

const http = require("http");
const fs = require("fs");
const path = require("path");
const url = require("url");

http.createServer(function(request, response) {
    function writeContentType(headerText) {
        response.setHeader("Content-Type", headerText);
    }
    let requestedPath = url.parse(request.url, true).pathname;
    requestedPath = requestedPath.replace(/^\/+|\/+$/g, "");
    requestedPath = requestedPath.replace(/\//g, "\\");
    requestedPath = "\\" + requestedPath;
    if (requestedPath === "\\") requestedPath = "\\index.html";
    if (!fs.existsSync(__dirname + requestedPath)) {
        console.log("file does not exist, requested path is " + __dirname + requestedPath);
        writeContentType("text/html");
        response.write("<h1>Error 404</h1><h2>Page not found</h2>");
        response.end();
    } else {
        let responseFile = fs.readFileSync(__dirname + requestedPath, function(err) {
            console.log(err);
        });
        if (responseFile) {
            let fileExtension = path.extname(requestedPath);
            switch(fileExtension) {
                case ".html" : writeContentType("text/html"); break;
                case ".css" : writeContentType("text/css"); break;
                case ".js" : writeContentType("text/javascript"); break;
                case ".svg" : writeContentType("image/svg+xml"); break;
                case ".jpg" :
                case ".jpeg" : writeContentType("image/jpeg"); break;
            }
            response.end(responseFile);
        }
    }
}).listen(8080);

La idea era quitar todas las barras al principio y al final de requestedPath, reemplazar las barras del interior con barras invertidas porque mi sistema de archivos está en Windows y luego agregar una barra invertida al principio y luego buscar el archivo en el sistema de archivos. Podría estar yendo en contra de muchas de las mejores prácticas aquí, solo estoy comenzando.

0
edddd 27 ago. 2020 a las 10:18

2 respuestas

La mejor respuesta
  1. Dondequiera que haga referencia a los archivos JS y CSS, use un '/' al frente para que siempre realice búsquedas en el directorio raíz de los archivos. Por ejemplo,

    href = "/ styles.css"

  2. Siempre para usar express.static para servir archivos estáticos

1
Dharman 27 ago. 2020 a las 07:41

Este es el comportamiento esperado, cuando presionas localhost:8080/ esperas que te sirvan index.html

Entonces, cuando agrega una barra diagonal, asume que es un directorio y busca sus archivos allí.

Intente utilizar el paquete npm express-slash o cree middleware personalizado como:

app.use(function(req, res, next) {
    if (req.path.substr(-1) == '/' && req.path.length > 1) {
       const query = req.url.slice(req.path.length);
       res.redirect(301, req.path.slice(0, -1) + query);
    } else {
       next();
    }
});

Se puede encontrar un problema similar aquí

0
indyanin 27 ago. 2020 a las 07:42
63611011