nodejs 读取显示页面静态资源分发每一个外部文件的引用都将发起一次HTTP请求！！！每一个外部文件的引用都将发起一次HTTP请求！！！

68 阅读 0 评论 45 点赞

我是靠谱客的博主个性铅笔，最近开发中收集的这篇文章主要介绍nodejs 读取显示页面静态资源分发每一个外部文件的引用都将发起一次HTTP请求！！！每一个外部文件的引用都将发起一次HTTP请求！！！，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文件夹路径：

- index.html (引入外部样式表 style.css)

- style.css

- server.js

需求：使用 nodejs 建立一个 http 服务，请求 index.html 并在浏览器渲染出来。

初始代码：

var fs = require('fs');
var http = require('http');
var server = http.createServer((req,res)=>{
res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
fs.readFile("./index.html",'utf-8',function(err,data){
if(err){
console.log(err)
res.end("err")
return
}
res.end(data);
})
})
server.listen(3000)
console.log("listen on post 3000..")

刚开始遇到的问题：我发现只获取了页面，但是页面所引入的外部资源并没有生效

猜想: 外部资源没有被成功引入，有两种原因，一是请求路径不对，二是后台代码错误

验证：我查看浏览器调试器的 network ，发现外部资源文件的请求URL无误(http://localhost:3000/style.css)，那么就是后台代码错误

总结：因为在 index 页面中，引入了外部的 css 文件，当在请求到 index.html后，解析到页面内的外部资源时，服务器自动将其补充为完整的请求URL，然后发起请求，在这里我忽略了一点 “每一个外部文件的引用都将发起一次请求”，没有给这些文件的请求设置相应的操作

每一个外部文件的引用都将发起一次HTTP请求！！！

报错：Resource interpreted as Stylesheet but transferred with MIME type text/html (MIME类型不符)

错误分析：如果我们访问的是.html文件，此时content-type就应该是 text/html。如果我们访问的是一个.css文件，此时就应该是 text/css

改正思路：写一个 MINE 类型映射关系对，从请求的URL中得到要读取的文件的后缀名，然后设置它的响应首部中的 content-type 为相应类型。

初步改进代码：

var fs = require('fs');
var http = require('http');
var url = require("url")
var path = require("path")
var mime = {
".jpg":"image/jpg",
".jpeg":"image/jpeg",
".gif":"image/gif",
".png" : "image/png",
".html" : "text/html;charset=UTF-8",
".js":"application/x-javascript",
".css":"text/css"
}
var server = http.createServer((req,res)=>{
// 得到用户读取什么
var pathname = url.parse(req.url).pathname
// 得到扩展名
var extname = path.extname(pathname)
fs.readFile("./"+pathname,'utf-8',function(err,data){
if(err){
console.log(err)
res.end("err")
return
}
// 检查是否属于我已知的 mime 类型
if(mime.hasOwnProperty(extname)){
res.setHeader('Content-Type',mime[extname]);
}
res.end(data);
})
})
server.listen(3000)
console.log("listen on post 3000..")

问题：不能自动识别首页，比如输入 http://localhost:3000，应该自动读取 index.html

解决办法：这种路径都没有扩展名，如果输入的URL中没有带扩展名的文件，则自动补充上 “/index.html”

完整代码：

var fs = require('fs');
var http = require('http');
var url = require("url")
var path = require("path")
var querystring = require("querystring")
var mime = {
".jpg":"image/jpg",
".jpeg":"image/jpeg",
".gif":"image/gif",
".png" : "image/png",
".html" : "text/html;charset=UTF-8",
".js":"application/x-javascript",
".css":"text/css"
}
var server = http.createServer((req,res)=>{
// 得到用户读取什么
var pathname = url.parse(req.url).pathname
// 得到扩展名
var extname = path.extname(pathname)
// 如果URL不存在拓展名，此时表示这是一个文件夹，自动补全这个文件夹
if(!extname){
// 如果不是以/结尾，会造成浏览器识别路径层次有问题
if(pathname.substr(-1)!="/"){
res.writeHead(302,{"locatgion":pathname+"/"})
}
pathname +="/index.html"
}
// 读取这个文件
fs.readFile("./"+pathname,'utf-8',function(err,data){
if(err){
console.log(err)
res.end("err")
return
}
// 检查是否属于我已知的 mime 类型
if(mime.hasOwnProperty(extname)){
res.setHeader('Content-Type',mime[extname]);
}
res.end(data);
})
})
server.listen(3000)
console.log("listen on post 3000..")