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とある：私は罰金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.cssファイルがmime-type text/javascriptで提供されている場合。

私には見えないものはありますか？

また、2つのtext/javascriptがログに記録されていて、main.jsが配信された後も両方が表示されています。私のスクリプトタグの後に私のmain.cssのリンクタグを切り取って貼り付けると、両方ともtext/cssとして扱われます。

これは私のfileExtがグローバル変数であることと関係がありますか？

出典

2017-10-10 Omkar Manjrekar

に持っています。私の悪い！

let fileExt;

最初に使用されている「fileExt」の前にどこかのパス名変数またはを宣言した後、上記の文を挿入するには、問題を解決します。

出典

2017-10-12 11:01:19

私は、ServerSideとClientSideの間のパスが混乱していると思います。あなたのHTMLにはCSSが./main.cssとありますが、あなたが直接main.jsを使用しています。

ロード中のフォルダ/ URLを確認する完全なプロジェクトはありません。

ExpressJSを使用しない理由はありますか？は、例えば、あなたのディレクトリは次のようにしている場合：

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

そしてindex.jsであなたはちょうど私が変数fileExtを宣言することができなかった

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

ここではできるだけバニラに行っているのは学習目的のためだけです。 URLに関しては、彼らは大丈夫だと私はクロムの下のソースタブのファイルを見ることができました。すべての静的ファイルは、viewsという名前の1つのディレクトリに存在します。 –

NodeJSから静的ファイルを提供する際に、奇妙なMIMEタイプの上書きの問題が発生する

答えて

関連する問題