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

本文介绍了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 | MDNicon-default.png?t=L892https://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)

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值