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.
2 respuestas
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"
Siempre para usar express.static para servir archivos estáticos
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í
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.