首页 > 代码库 > nodejs请求静态资源404错误,后台需处理返回http请求的静态资源
nodejs请求静态资源404错误,后台需处理返回http请求的静态资源
nodejs小白在做的demo时后台返回主页面html后,页面请求引用的js文件,后台没有返回对应请求路径的静态资源,所以报错。原来在java开发下没有注意过这种问题,一般除了WEB-INF下的文件不能访问外,其他资源文件都可以直接用http路径访问。
1.使用http模块处理(http模块时nodejs内置模块)
public文件夹下的文件js,html默认为静态资源,后台读取这些文件然后返回给前台。
1 var http = require(‘http‘); 2 var fs = require(‘fs‘) 3 const path = require(‘path‘); 4 const server = http.createServer((req,res)=>{ 5 res.statusCode=200; 6 var pathurl=path.join(__dirname, req.url); 7 var parseurl= path.parse(pathurl); 8 var spliturls=path.normalize( req.url).split(path.sep) 9 var html=""; 10 if(spliturls.length>0&&spliturls[1]==‘public‘){ 11 if(parseurl.ext==‘.js‘){ 12 res.setHeader(‘Content-Type‘,‘text/plain‘); 13 html= fs.readFileSync(path.join(__dirname, req.url)); 14 }else if(parseurl.ext==‘.html‘){ 15 res.setHeader(‘Content-Type‘,‘text/html‘); 16 html= fs.readFileSync(path.join(__dirname, req.url)); 17 } 18 }else{ 19 res.setHeader(‘Content-Type‘,‘text/html‘); 20 html= fs.readFileSync(path.join(__dirname, ‘src/index.html‘)); 21 } 22 res.end(html) 23 }) 24 server.listen(‘3000‘,‘127.0.0.1‘,()=>{ 25 console.log(`服务器运行在 http://127.0.0.1:3000/`); 26 })
2.使用express模块(nodejs的一个web框架,封装了http模块)
1 var express = require("express"); 2 var app = new express(); 3 const path = require(‘path‘); 4 app.use(express.static(path.join(__dirname,‘public‘))) 5 app.use(‘/‘,function(req,res){ 6 res.setHeader(‘Content-Type‘,‘text/html‘); 7 var html= fs.readFileSync(path.join(__dirname, ‘src/index.html‘)); 8 res.end(html) 9 }) 10 app.listen(‘3000‘,‘127.0.0.1‘)
其中express.static是设置静态资源的目录,如果请求这个目录下的文件,则会返回对应文件。这里需要注意的是前台请求的文件路径如果是相对路径,则从public下面的文件开始,不包括public,否则取不到文件,然后又执行下面的use,返回的数据就不对了。
测试项目的实际静态资源的路径: E:\mywv\testbb\public,其中testbb是项目名称,因此如果请求E:\mywv\testbb\public\index.js文件的http请求路径是http://127.0.0.1:3000/index.js,而不是http://127.0.0.1:3000/public/index.js。
原因:
express.static(path.join(__dirname,‘public‘))调用的是 serve-static/index.js中的
1 function serveStatic (root, options) { 2 if (!root) { 3 throw new TypeError(‘root path required‘) 4 } 5 6 if (typeof root !== ‘string‘) { 7 throw new TypeError(‘root path must be a string‘) 8 } 9 10 ......此处省略部分代码..... 11 ....... 12 // construct directory listener 13 var onDirectory = redirect 14 ? createRedirectDirectoryListener() 15 : createNotFoundDirectoryListener() 16 17 return function serveStatic (req, res, next) { 18 if (req.method !== ‘GET‘ && req.method !== ‘HEAD‘) { 19 if (fallthrough) { 20 return next() 21 } 22 23 // method not allowed 24 res.statusCode = 405 25 res.setHeader(‘Allow‘, ‘GET, HEAD‘) 26 res.setHeader(‘Content-Length‘, ‘0‘) 27 res.end() 28 return 29 } 30 31 var forwardError = !fallthrough 32 var originalUrl = parseUrl.original(req) 33 var path = parseUrl(req).pathname 34 35 // make sure redirect occurs at mount 36 if (path === ‘/‘ && originalUrl.pathname.substr(-1) !== ‘/‘) { 37 path = ‘‘ 38 } 39 40 // create send stream 41 var stream = send(req, path, opts) 42 43 ......此处省略部分代码...... 44 ........... 45 46 // pipe 47 stream.pipe(res) 48 } 49 }
调用express.static时,使用的serveStatic (root, options)函数,参数root为E:\mywv\testbb\public,创建发送流(send(req, path, opts)),然后在发送文件时stream.pipe(res).当前端请求路径是
http://127.0.0.1:3000/public/index.js文件时,pipe输出文件使用的文件路径生成是有误的导致文件找不到。
下图是stream.pipe输出文件时,文件路径的生成。
nodejs请求静态资源404错误,后台需处理返回http请求的静态资源
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。