Seltsames Mime-Type-Überschreib-Problem beim Bereitstellen statischer Dateien von NodeJS

Ich verwende NodeJS, um Dateien aus meinem Sichtenverzeichnis zu liefern (kein Express). Ich folge einer App, Server, Router, Handler-Struktur mit Handler, der fast den gesamten Code besitzt.Seltsames Mime-Type-Überschreib-Problem beim Bereitstellen statischer Dateien von NodeJS

Hier ist der Code für 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;

Und das ist 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>

Nun, wenn ich den letzten Script-Tag aus main.html alles lädt fein entfernen, aber Wenn es vorhanden ist, wird meine Datei main.css mit MIME-type text/javascript geliefert.

Was sehe ich nicht?

Ich sehe auch zwei Text/Javascript werden geloggt und beide von ihnen sind nach main.js gedient wird. Wenn ich das Link-Tag für meine main.css nach meinem Skript-Tag ausschneide und einfüge, werden beide als text/css geliefert.

Hat das etwas damit zu tun, dass mein FileExt eine globale Variable ist?

Quelle

2017-10-10 Omkar Manjrekar

I Variable FileExt erklären ist fehlgeschlagen. Mein Fehler!

let fileExt;

Einsetzen der obige Aussage nach Pfadnamen Variable deklariert oder irgendwo vor „FileExt“ wird zuerst löst das Problem verwendet.

Quelle

2017-10-12 11:01:19

Ich denke, dass Sie eine Verwirrung zwischen den Pfaden zwischen ServerSide und ClientSide haben. In Ihrem HTML ist die CSS mit ./main.css aber für die JS verwenden Sie direkt main.js

Ich habe nicht das vollständige Projekt, um die Ordner/URL zu überprüfen, die geladen werden.

Gibt es einen Grund, ExpressJS nicht zu verwenden? zum Beispiel, wenn Sie Ihre Verzeichnisse sind wie:

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

Und in index.js Sie müssen nur

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

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

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

Quelle

2017-10-10 20:52:06

Es ist nur für Lernzwecke, dass ich Vanilla so viel wie möglich hier gehe. Wie für die URLs scheinen sie in Ordnung und ich konnte die Dateien in Quellen Registerkarte unter Chrome sehen. Alle statischen Dateien sind in einem Verzeichnis namens Sichten vorhanden. –

Seltsames Mime-Type-Überschreib-Problem beim Bereitstellen statischer Dateien von NodeJS

Antwort

Verwandte Themen