css强制失效,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');,于是便把他改成根据请求文件后缀设置不同的content-type,测试css起效了，于是我想这个问题的原因可能是浏览器解析文件流时优先以content-type决定文件类型，在不提供content-type的情况下，浏览器应该会自动进行判断，大概率优先以文件后缀名判断，于是我去掉了content-type设置，测试了一下，css文件任然有效，但浏览器的种类很多，保险起见，还是加上content-type的设置