在http协议中，content-type用来告诉对方本次传输的数据的类型是什么。
在请求头中设置content-type来告诉服务器，本次请求携带的数据是什么类型的
在响应头中设置content-type来告诉浏览器，本次返回的数据是什么类型的
通过使用res对象中的setHeader方法，我们可以设置content-type这个响应头。这个响应头的作用是告诉浏览器，本次响应的内容是什么格式的内容，以方便浏览器进行处理。
这个我在之前写的博客内讲解了 想看详细的可以参考这里:
例如下面.如果读出来的是.html的文件，但是content-type设置为了css。则浏览器将不会当作是html页面来渲染了。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1{
text-align: center;
}
</style>
+ <link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>index.html</h1>
+ <img src="./1.png" alt="">
</body>
</html>上面的加号表示这里的代码需要修改.
const http = require('http'); //http模块
const fs = require('fs'); //fs模块
const path = require('path'); //path模块
const app = http.createServer((req, res) => {
const url = req.url // 获取本次请求的url
console.log('用户请求的是',url)
console.log(req)
if(url === '/index.html') {
// 读入index.html的内容，设置响应体
fs.readFile('./static/index.html',(err,data)=>{
res.setHeader('content-type', 'text/html;charset=utf8')
console.log(data)
res.end(data)
})
} else if(url === '/default.png'){
// 读入 default.png 的内容，设置响应体
fs.readFile('./static/default.png',(err,data)=>{
// res.setHeader('content-type', 'text/css;charset=utf8')
res.setHeader('content-type', 'image/png')
console.log(data)
res.end(data)
})
}else if(url === '/style.css'){
// 读入 default.png 的内容，设置响应体
fs.readFile('./static/style.css',(err,data)=>{
res.setHeader('content-type', 'text/css;charset=utf8')
res.end(data)
})
}else if(url === '/js/jquery.js'){
// 读入 default.png 的内容，设置响应体
fs.readFile('./static/js/jquery.js',(err,data)=>{
res.setHeader('content-type', 'application/javascript;charset=utf8')
console.log(data)
res.end(data)
})
}else if(url === '/abc.jpg'){
// 读入 default.png 的内容，设置响应体
fs.readFile('./static/default.png',(err,data)=>{
res.setHeader('content-type', 'image/png')
console.log(data)
res.end(data)
})
}else {
res.statusCode = 404
res.end('not found')
}
})
//启动服务器，监听8082端口
app.listen(8082, () => {
console.log('8082端口启动');
});也可以使用策略模式,用对象来带入 ,就可以节省很多行代码,让你的代码写的又飒又亮
const http = require('http')
const path = require('path')
const fs = require('fs')
// “策略模式”
// .png --> 'image/png'
// .html --> 'text/html;charset=utf8'
// .js --> 'application/javascript;charset=utf8'
// .css --> 'text/css;charset=utf8'
const obj = {
".png":"image/png",
".jpg":"image/jpg",
".html":"text/html;charset=utf8",
".js":"application/javascript;charset=utf8",
".css":"text/css;charset=utf8"
}
const server = http.createServer((req, res)=>{
// 如果直接http://localhost:8085 ===> req.url 就是 /,这时，希望它去加载 /index.html
const url = req.url === '/' ? '/index.html' : req.url
// 如果 req.url 要访问的文件在public能找到，就读出来，返回
const filePath = path.join(__dirname,'public', url)
// console.log('要读取的文件地址是',filePath )
fs.readFile(filePath,(err, data)=>{
if(err){
res.statusCode = 404
res.end('not found')
} else {
// 获取后缀名
const extName = path.extname(filePath)
console.log('本次请求的资源', extName, filePath)
// 设置响应头中的content-type
// .png --> 'image/png'
// .html --> 'text/html;charset=utf8'
// .js --> 'application/javascript;charset=utf8'
// .css --> 'text/css;charset=utf8'
// if(extName === '.png') {
// res.setHeader('content-type', 'image/png')
// } else if(extName === '.html') {
// res.setHeader('content-type', 'text/html;charset=utf8')
// }else if(extName === '.js') {
// res.setHeader('content-type', 'application/javascript;charset=utf8')
// }else if(extName === '.css') {
// res.setHeader('content-type', 'text/css;charset=utf8')
// }
if(obj[extName]) {
res.setHeader('content-type', obj[extName])
}
res.end(data)
}
})
// if(filePath存在){
// 读出来，返回
// } else{
// 返回404
// }
// res.end(filePath)
})
server.listen(8085)