最近正在尝试使用node写后端，使用node创建html" title=http>http服务的时候，碰到了这样的一个问题：
这是我的源代码：
import { createServer } from 'html" title=http>http'
import { join, dirname, extname } from 'path'
import { fileURLToPath } from 'url'
import { readFile } from 'fs'
// 创建服务器
const server = createServer()
// 定义需要运行的js文件所在目录
const __dirname = dirname(fileURLToPath(import.meta.url))
// 根据文件后缀名获取对应的Content-Type值
// const getContentType = ( filePath ) => {
// const ext = extname(filePath).toLowerCase()
// switch( ext) {
// case '.html': return 'text/html;charset=utf-8'
// case '.js': return 'application/javascript;charset=utf-8'
// case '.css': return 'text/css;charset=utf-8'
// }
// }
server.on('request', ( req, res ) => {const url = req.urlconst fPath = join(__dirname, '../'+url)console.log(fPath)readFile(fPath, 'utf8', ( err, dataStr ) => {if( err ) {return res.end('404 Not Found')}res.setHeader('Content-Type', 'text/html;charset=utf-8')// res.setHeader('Content-Type', getContentType(fPath))res.end(dataStr)})
})server.listen(80, () => {console.log('服务器启动成功')})这是我的静态文件目录
html" title=http>https://i-blog.csdnimg.cn/direct/5a38664080f245748b30bb15384ba0ca.png" width="1070" />
看起来没有什么问题，但是当我在浏览器地址输入html" title=http>http://localhost/clock/index.html，因为是80端口，所以可以省略端口号
html" title=http>https://i-blog.csdnimg.cn/direct/7be4a42883ea477a8a7802dda9bff315.png" width="1919" />
可以发现css样式丢失
什么原因导致的呢？
我们来f12调试一下
html" title=http>https://i-blog.csdnimg.cn/direct/e15abe6cf0e3457eb1ae6647f665d227.png" width="1904" />
可以看到确实是请求到了三个静态文件，其中index.html的Content-Type为
text/html;charset=utf-8，没什么问题。
但是style.css的Content-Type也为text/html;charset=utf-8
html" title=http>https://i-blog.csdnimg.cn/direct/410fe1c92eda4059a9074918d91bfe2c.png" width="1919" />
这就是原因所在，响应头部错误，浏览器就不会把它解析为样式表，从而导致样式失效。
同样，index.js亦如（但是index.js脚本没有失效）
html" title=http>https://i-blog.csdnimg.cn/direct/f38420cf80394fefae8b9bff9a54aa1a.png" width="1906" />
那怎么解决呢？
我们只需要动态的根据文件后缀名设置Content-Type即可
修改后的代码
import { createServer } from 'html" title=http>http'
import { join, dirname, extname } from 'path'
import { fileURLToPath } from 'url'
import { readFile } from 'fs'
// 创建服务器
const server = createServer()
// 定义需要运行的js文件所在目录
const __dirname = dirname(fileURLToPath(import.meta.url))
// 根据文件后缀名获取对应的Content-Type值
const getContentType = ( filePath ) => {const ext = extname(filePath).toLowerCase()switch( ext) {case '.html': return 'text/html;charset=utf-8'case '.js': return 'application/javascript;charset=utf-8'case '.css': return 'text/css;charset=utf-8'}
}
server.on('request', ( req, res ) => {const url = req.urlconst fPath = join(__dirname, '../'+url)console.log(fPath)readFile(fPath, 'utf8', ( err, dataStr ) => {if( err ) {return res.end('404 Not Found')}// res.setHeader('Content-Type', 'text/html;charset=utf-8')res.setHeader('Content-Type', getContentType(fPath))res.end(dataStr)})
})server.listen(80, () => {console.log('服务器启动成功')})这个时候，页面就正常了
html" title=http>https://i-blog.csdnimg.cn/direct/969fd0979fb1477895b52fe3fd83d966.png" width="1917" />
打开调试工具，Content-Type正常了
html" title=http>https://i-blog.csdnimg.cn/direct/f06053e4226f4543bf7cf7fb18e202db.png" width="1919" />
