使用Node的http模块创建web服务,给客户端返回html页面时,css失效的根本原因(有助于理解http)

最近正在尝试使用node写后端,使用node创建http服务的时候,碰到了这样的一个问题:

这是我的源代码:

import { createServer } from '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('服务器启动成功')})

这是我的静态文件目录

看起来没有什么问题,但是当我在浏览器地址输入http://localhost/clock/index.html,因为是80端口,所以可以省略端口号

可以发现css样式丢失

什么原因导致的呢?

我们来f12调试一下

可以看到确实是请求到了三个静态文件,其中index.html的Content-Type为

text/html;charset=utf-8,没什么问题。

但是style.css的Content-Type也为text/html;charset=utf-8

这就是原因所在,响应头部错误,浏览器就不会把它解析为样式表,从而导致样式失效。

同样,index.js亦如(但是index.js脚本没有失效)

那怎么解决呢?

我们只需要动态的根据文件后缀名设置Content-Type即可

修改后的代码

import { createServer } from '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('服务器启动成功')})

这个时候,页面就正常了

打开调试工具,Content-Type正常了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34246.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM 2015/3/15

定义:Java Virtual Machine -java程序的运行环境(java二进制字节码的运行环境) 好处: 一次编写,到处运行 自动内存管理,垃圾回收 数组下标越界检测 多态 比较:jvm/jre/jdk 常见的JVM&…

IP风险度自检,互联网的安全“指南针”

IP地址就像我们的网络“身份证”,而IP风险度则是衡量这个“身份证”安全性的重要指标。它关乎着我们的隐私保护、账号安全以及网络体验,今天就让我们一起深入了解一下IP风险度。 什么是IP风险度 IP风险度是指一个IP地址可能暴露用户真实身份或被网络平台…

【鸿蒙】封装日志工具类 ohos.hilog打印日志

封装一个ohos.hilog打印日志 首先要了解hilog四大日志类型: info、debug、warm、error 方法中四个参数的作用 domain: number tag: string format: string ...args: any[ ] 实例: //普通的info日志,使用info方法来打印 //第一个参数 : 0x0…

走路碎步营养补充贴士

走路碎步,这种步伐不稳的现象,在日常生活中并不罕见,特别是对于一些老年人或身体较为虚弱的人来说,更是一种常见的行走状态。然而,这种现象可能不仅仅是肌肉或骨骼的问题,它还可能是身体在向我们发出营养缺…

Python软件和搭建运行环境

目录 一、Python安装全流程(Windows/Mac/Linux) 1. 下载官方安装包 2. 详细安装步骤(以Windows为例) 3. 环境变量配置(Mac/Linux) 二、虚拟环境管理(关键!) 为什么需…

【蓝桥杯】省赛:神奇闹钟

思路 python做这题很简单,灵活用datetime库即可 code import os import sys# 请在此输入您的代码 import datetimestart datetime.datetime(1970,1,1,0,0,0) for _ in range(int(input())):ls input().split()end datetime.datetime.strptime(ls[0]ls[1],&quo…

RabbitMQ (Java)学习笔记

目录 一、概述 ①核心组件 ②工作原理 ③优势 ④应用场景 二、入门 1、docker 安装 MQ 2、Spring AMQP 3、代码实现 pom 依赖 配置RabbitMQ服务端信息 发送消息 接收消息 三、基础 work Queue 案例 消费者消息推送限制(解决消息堆积方案之一&#…

HW基本的sql流量分析和wireshark 的基本使用

前言 HW初级的主要任务就是看监控(流量) 这个时候就需要我们 了解各种漏洞流量数据包的信息 还有就是我们守护的是内网环境 所以很多的攻击都是 sql注入 和 webshell上传 (我们不管对面是怎么拿到网站的最高权限的 我们是需要指出它是…

camellia redis proxy v1.3.3对redis主从进行读写分离(非写死,自动识别故障转移)

1 概述 camellia-redis-proxy是一款高性能的redis代理(https://github.com/netease-im/camellia),使用netty4开发,主要特性如下: 支持代理到redis-standalone、redis-sentinel、redis-cluster。支持其他proxy作为后端…

贪吃蛇小游戏-简单开发版

一、需求 本项目旨在开发一个经典的贪吃蛇游戏,用户可以通过键盘控制蛇的移动方向,让蛇吃掉随机出现在游戏区域内的食物,每吃掉一个食物,蛇的身体长度就会增加,同时得分也会相应提高。游戏结束的条件为蛇撞到游戏区域的…

使用 Docker 部署前端项目全攻略

文章目录 1. Docker 基础概念1.1 核心组件1.2 Docker 工作流程 2. 环境准备2.1 安装 Docker2.2 验证安装 3. 项目配置3.1 项目结构3.2 创建 Dockerfile 4. 构建与运行4.1 构建镜像4.2 运行容器4.3 访问应用 5. 使用 Docker Compose5.1 创建 docker-compose.yml5.2 启动服务5.3 …

接口自动化测试用例

Post接口自动化测试用例 Post方式的接口是上传接口,需要对接口头部进行封装,所以没有办法在浏览器下直接调用,但是可以用Curl命令的-d参数传递接口需要的参数。当然我们还以众筹网的登录接口为例,讲解post方式接口的自动化测试用…

使用WireShark解密https流量

概述 https协议是在http协议的基础上,使用TLS协议对http数据进行了加密,使得网络通信更加安全。一般情况下,使用WireShark抓取的https流量,数据都是加密的,无法直接查看。但是可以通过以下两种方法,解密抓…

阿里百炼Spring AI Alibaba

文章目录 学习链接阿里百炼创建api-key查看api调用示例示例pom.xmlAQuickStartMultiChatStreamChat Spring AI Alibaba简单示例pom.xmlapplication.ymlHelloworldControllerDashScopeChatModelController图解spring AI的结构 deepseekpom.xmlapplication.ymlDeepSeekChatClient…

【模拟算法】

目录 替换所有的问号 提莫攻击 Z 字形变换 外观数列 数青蛙(较难) 模拟算法:比葫芦画瓢。思路较简单,考察代码能力。 1. 模拟算法流程,一定要在演草纸上过一遍流程 2. 把流程转化为代码 替换所有的问号 1576. 替…

【Linux】进程(1)进程概念和进程状态

🌟🌟作者主页:ephemerals__ 🌟🌟所属专栏:Linux 目录 前言 一、什么是进程 二、task_struct的内容 三、Linux下进程基本操作 四、父进程和子进程 1. 用fork函数创建子进程 五、进程状态 1. 三种重…

配置blender的python环境

在blender的脚本出输入: import sys print(sys.executable) 2. 通过上述命令我们得到blener的python版本,下面我们在conda配置一个同样版本的python环境。 conda create -n blenderpy python3.11.9找到blender安装路径下的python文件夹,将它…

【bug日记】 编译错误

在我使用vscode的时候,我想用一个头文件和两个cpp文件,头文件是用来声明一个类的,一个cpp是用来类的成员函数,一个cpp是主函数 但是我写完编译发现会弹出找不到这个类成员函数这个cpp文件,爆出这样的错误 提示我找不到…

SQLAlchemy系列教程:批量插入数据

高效地批量插入数据对于应用程序的性能至关重要。SQLAlchemy为批处理操作提供了几种机制,可以最大限度地减少开销并加快数据库事务时间。在本指南中,我们将探讨如何使用SQLAlchemy执行批量插入,包括从基础技术到高级技术。 搭建环境 在开始之…

蓝桥杯十天冲刺-day1(getline读入空格)

getline读入带空格的字符串 解决cin或scanf无法读入空格的问题 作文标题 代码思路 主要通过这个代码体会getline函数可以输入空格的作用 用getline函数输入含空格的字符串&#xff0c;用length()函数记字符串长度 依次扫描不为空格的字符计数 #include<bits/stdc.h>…