CSS文件樣式失效

發現問題

我的一個node項目需要使用另一個靜態資源服務器的資源文件（主要是js,css,html文件），在使用此服務的過程中，我發現css文件並沒有起效

app.js

var http = require('http');
var fs = require('fs');
const path = require('path');

http.createServer(function (request, response) {

    // 發送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容類型: text/plain
    // console.log(request)
    //{'Content-Type':'text/html;charset=utf-8'}
    response.setHeader('Access-Control-Allow-Origin', '*');
    try{
        let prepath = request.url.split('?')[0]
        //一開始出錯時的設置
        //response.setHeader('Content-Type', 'text/javascript;charset=utf-8');
        
        //根據文件類型，設置響應頭或者不寫返回的數據的格式及編碼
         if(prepath.endsWith('.js')){
             response.setHeader('Content-Type', 'text/javascript;charset=utf-8');
         }else if(prepath.endsWith('.css')){
             response.setHeader('Content-Type', 'text/css;charset=utf-8');
         }else if(prepath.endsWith('.html')){
             response.setHeader('Content-Type', 'text/html;charset=utf-8');
         }
        
        
        if(prepath.includes('/static/pubilc')){
            prepath = prepath.split('/static/pubilc')[1]

        }
        console.log(prepath)
        if(prepath.includes('css/page')||prepath.includes('js/page')){
            response.statusCode = 302
            response.setHeader('Location', 'http://localhost:3000'+prepath)
            response.end()
            return
        }
        const filepath = path.join(__dirname,'/public',prepath)
        // console.log(filepath)
        if(fs.existsSync(filepath)){
            const stream = fs.createReadStream(filepath);
            stream.pipe(response)
        }else{
            response.end('文件不存在')
        }
    }catch(e){
        response.end(JSON.stringify(e))
    }
    // response.end(request.url)
}).listen(3001);

// 終端打印如下信息
console.log('Server running at http://127.0.0.1:3001/');

處理問題

我參考css錯誤排查查找錯誤，在進行css編碼檢查時，發現響應頭設置成了response.setHeader('Content-Type', 'text/javascript;charset=utf-8');,於是我便把他改成根據請求文件后綴（.js、.css、.html）來設置不同的content-type,進行測試，css起效了，於是我想這個問題的原因可能是瀏覽器解析文件流時優先以content-type決定文件類型，在不提供content-type的情況下，瀏覽器應該會自動進行判斷，大概率優先以文件后綴名判斷，於是我去掉了content-type設置，進行測試，css文件任然有效，但考慮到瀏覽器的種類很多，保險起見，我還是加上了content-type的設置