Problème de réécriture bizarre de type mime lors de la diffusion de fichiers statiques à partir de NodeJS

J'utilise NodeJS pour diffuser des fichiers à partir de mon répertoire de vues (pas d'express). Je suis une application, serveur, routeur, structure de gestionnaire avec gestionnaire possédant presque tout le code.Problème de réécriture bizarre de type mime lors de la diffusion de fichiers statiques à partir de NodeJS

Voici le code pour handler.js:

const fs = require('fs'), 
path = require('path'), 
formidable = require('formidable'); 

function handle(pathname, method, viewDir, response){ 
    let filePath; 
    console.log(pathname); 
    if(pathname==='/'){ 
     pathname = '/main.html'; 
    } 

    if(pathname==='/favicon.ico'){ 
     debugger; 
     response.end(); 
    } 
    else{ 
     filePath = viewDir + pathname; 
     //fileext = pathname.substr(pathname.lastIndexOf('.')+1); 
     fileExt = path.extname(pathname); 
     console.log(filePath+'\n'+fileExt); 
     if(fileExt!==''){ 
      fs.readFile(filePath, function(err,data){ 
       if(err){ 
        response.writeHead(400, {'Content-Type': 'text/html'}); 
        response.end('<h1>Error reading file!</h1>'); 
       } 
       if(data){ 
        debugger; 
        // console.log({'Content-Type': 'text/' + fileExt.substr(1)=='js'?'javascript':fileExt.substr(1)}); 
        let mimeType = 'text/' + (fileExt.substr(1)=='js'?'javascript':fileExt.substr(1)); 
        console.log(mimeType); 
        response.writeHead(200, {'Content-Type': mimeType}); 
        response.write(data); 
        response.end(); 
       } 
      }); 
     } 
     else if(pathname==='/upload' && method.toLowerCase()==='post'){ 
      //some formidable code here 
      response.end(); 
     } 
     else{ 
      response.writeHead(404, {'Content-Type': 'text/html'}); 
      response.end('<h1>404 File not found!</h1>'); 
     } 
    } 

} 

    exports.handle = handle;

Et ceci est main.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Caption generator for images</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="./main.css"></link> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
</head> 
<body> 
    <div class="jumbotron"> 
     <h1>Caption generator for images</h1> 
     <h3>Generates a list of captions appropriate for your uploaded picture by visual recognition.</h3> 
    </div> 
    <div class="container"> 
     <div class="page-header"> 
      <h1>Upload image</h1> 
     </div> 
     <form enctype="multipart/form-data"> 
      <div class="form-group"> 
       <label for="imageInputFile">Image input</label> 
       <input id="image-input-file" type="file" class="form-control-file" name="image-input-file" aria-describedby="fileHelp" accept="image/*"> 
       <small id="fileHelp" class="form-text text-muted">Upload an image file or use already uploaded image.</small> 
      </div> 
      <button type="submit" id="file_submit" class="btn btn-primary">Submit</button> 
     </form> 
    </div> 
    <script type="text/javascript" src="main.js"></script> 
</body> 
</html>

Maintenant, si je supprime la dernière balise de script de charges tout main.html bien, mais si c'est mon fichier main.css présent est servi avec mime-type text/javascript.

Qu'est-ce que je ne vois pas?

Je vois aussi deux text/javascript se connecter et les deux sont après que le main.js soit servi. Si je coupe et colle la balise de lien pour mon main.css après que mon tag de script les deux soient servis comme texte/CSS.

Cela a-t-il quelque chose à voir avec mon fichierExt étant une variable globale?

Source

2017-10-10 Omkar Manjrekar

J'omis de déclarer fileExt variable. Ma faute!

let fileExt;

Insertion de la déclaration ci-dessus après la déclaration variable ou chemin avant n'importe où « fileExt » est d'abord utilisé résout le problème.

Source

2017-10-12 11:01:19

Je pense que vous avez une confusion entre les chemins entre ServerSide et ClientSide. Dans votre HTML le css est avec ./main.css mais pour le JS votre utilisation directement main.js

Je n'ai pas le projet complet pour vérifier les dossiers/URL qui sont en cours de chargement.

Existe-t-il une raison de ne pas utiliser ExpressJS? par exemple, si vos répertoires sont comme:

app/ 
app/index.js 
app/public/{here your css, main}

Et index.js Vous avez juste à

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

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

 
app.listen(3000, function() { 
 
    console.log('Example app listening on port 3000!') 
 
});

Source

2017-10-10 20:52:06

C'est seulement à des fins d'apprentissage que je vais vanillla autant que possible ici. En ce qui concerne les URL, ils semblent bien et je pouvais voir les fichiers dans l'onglet sources sous chrome. Tous les fichiers statiques sont présents dans un répertoire nommé views. –

Problème de réécriture bizarre de type mime lors de la diffusion de fichiers statiques à partir de NodeJS

Répondre

Questions connexes