node.js渲染html无css,Node.js 加载静态资源css,js等不显示问题的解决方法

本文探讨了HTTP响应头中Content-Type的重要性,它根据文件后缀决定如HTML、CSS和JavaScript的类型。当服务器未能正确设置Content-Type时,可能导致资源加载失败。解决方案包括通过获取文件扩展名来设定正确的Content-Type,例如使用JavaScript模块来定义并引用不同的文件类型。实际操作分为四个步骤,确保每个文件请求都有匹配的Content-Type。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一,原因

1,没有响应到css等文件

2,响应类型是由文件的后缀名决定

(1)html的请求头

Content-Type : text/html ; charset=utf-8

(2) CSS的请求头

content-type:text/css; charset=utf-8

(3)JavaScript的请求头

content-type:text/javascrpt; charset=utf-8

二,解决方法:

(一)    拿到文件的后缀名

path.extname(path)获取扩展名

(二) 除了方法,也可以定义定义模块  =>  拿取后缀名(文件类型)

1,创建model文件夹

1277e708def57b5fec7f48b8a6beccaf.png

2,在model文件夹下创建 getMime.js 文件

47f63af72d818324cbd253cd7f8e79ae.png

/**

* 获取文件后缀名(文件类型)

* */

exports.getMime = function(extname){

switch(extname){

case '.html':

return 'text/html';

case '.css':

return 'text/css';

case '.js':

return 'text/javascript';

default:

return 'text/html';

}

}

(三)使用模块(注意模块的引用方式)

错误的引用方式:

8d2e621e79e5d7041998dcf96bb4b208.png

正确的引用方式 :

d8e26e8f86d9a6260a854be9f00eeaba.png

(四)实际操作(4个步骤)

b16a0ce7e98e48ed596f99dcf1c9c39e.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值