处理不同的请求--设置content-type

最新推荐文章于 2024-08-13 10:13:23 发布

老李头的代码生活

最新推荐文章于 2024-08-13 10:13:23 发布

阅读量6.8k

点赞数

分类专栏： node.js 文章标签： http html5 node.js

本文链接：https://blog.csdn.net/laoli360/article/details/120274512

版权

node.js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

本文介绍了HTTP协议中Content-Type的作用，它用于指示请求或响应中数据的类型。通过设置响应头的Content-Type，服务器告诉浏览器如何解析返回的内容。文章通过示例展示了如何在Node.js中读取不同类型的文件并正确设置Content-Type，包括HTML、CSS、图片和JavaScript。同时，还提出了使用策略模式简化代码的方法，通过对象映射文件扩展名到对应的MIME类型。

摘要由CSDN通过智能技术生成

content-type的作用

在http协议中，content-type用来告诉对方本次传输的数据的类型是什么。

在请求头中设置content-type来告诉服务器，本次请求携带的数据是什么类型的
在响应头中设置content-type来告诉浏览器，本次返回的数据是什么类型的

通过使用res对象中的setHeader方法，我们可以设置content-type这个响应头。这个响应头的作用是告诉浏览器，本次响应的内容是什么格式的内容，以方便浏览器进行处理。

常见的几种文件类型及content-type

这个我在之前写的博客内讲解了想看详细的可以参考这里:

MIME types (IANA media types) - HTTP | MDNhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

例如下面.如果读出来的是.html的文件，但是content-type设置为了css。则浏览器将不会当作是html页面来渲染了。

<!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)