从NodeJS提供静态文件时出现奇怪的MIME类型覆盖问题

我正在使用NodeJS从我的视图目录（不是快速）提供文件。我正在使用拥有几乎所有代码的处理程序来跟踪应用程序，服务器，路由器，处理程序结构。从NodeJS提供静态文件时出现奇怪的MIME类型覆盖问题

这里是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;

这是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>

现在，如果我从main.html中一切加载删除最后一个脚本标签罚款如果它的现在我的main.css文件获取与MIME类型的文本/ JavaScript。

我没有看到什么？

我也看到两个文本/ JavaScript获取记录，他们都是在main.js获取服务后。如果我在我的脚本标记之后剪切并粘贴main.css的链接标记，则它们都将作为text/css提供。

这是否与我的fileExt是一个全局变量有关？

来源

2017-10-10 Omkar Manjrekar

我没有声明变量fileExt。我的错！

let fileExt;

在首次使用“fileExt”之前，在声明pathname变量或任何位置后插入上述语句解决了该问题。

来源

2017-10-12 11:01:19

我认为你在ServerSide和ClientSide之间的路径混淆。在你的HTML中，CSS是./main.css，但是你直接使用的JS main.js

我没有完整的项目来检查正在加载的文件夹/ URL。

有没有理由不使用ExpressJS？例如，如果你的目录是这样的：

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

而且在index.js 你只需要

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

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

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

来源

2017-10-10 20:52:06

这只是为了学习的目的，我在这里尽可能地去vanillla。至于urls他们看起来没问题，我可以在chrome下看到sources标签中的文件。所有静态文件都存在于一个名为views的目录中。 –

从NodeJS提供静态文件时出现奇怪的MIME类型覆盖问题

回答

相关问题