摘要:搭建本地服務(wù)器參考了的搭建本地服務(wù)器做轉(zhuǎn)發(fā)使用實(shí)現(xiàn),官方文檔配置服務(wù)器和轉(zhuǎn)發(fā)接口地址判斷如果是接口訪問(wèn),則通過(guò)轉(zhuǎn)發(fā)這里參考的源碼,補(bǔ)充了幾個(gè)字體文件的。
起因:公司的產(chǎn)品更換前端框架,接口的訪問(wèn)原本是通過(guò)nginx配置反向代理實(shí)現(xiàn)的,本地沒(méi)有安裝nginx,就用node.js做一個(gè)。
node.js搭建本地http服務(wù)器參考了shawn.xie的《nodejs搭建本地http服務(wù)器》
node.js做轉(zhuǎn)發(fā)使用node-http-proxy實(shí)現(xiàn),官方文檔:https://github.com/nodejitsu/node-http-proxy#using-https
配置http服務(wù)器和proxy轉(zhuǎn)發(fā)var http = require("http"); var httpProxy = require("http-proxy"); var fs = require("fs"); var mine = require("./mime").types; var path = require("path"); var url = require("url"); var proxy = httpProxy.createProxyServer({ target: "https://192.168.101.166:8088",//接口地址 ssl: { key: fs.readFileSync("server_decrypt.key", "utf8"), cert: fs.readFileSync("server.crt", "utf8") }, secure: false }); proxy.on("error", function(err, req, res){ res.writeHead(500, { "content-type": "text/plain" }); console.log(err); res.end("Something went wrong. And we are reporting a custom error message."); }); var server = http.createServer(function(req, res){ var pathName = url.parse(req.url).pathname; var realPath = req.url.substring(1); var extName = realPath; var indexOfQuestionMark = extName.indexOf("?"); if(indexOfQuestionMark >= 0){ extName = extName.substring(0, indexOfQuestionMark); realPath = realPath.substring(0, indexOfQuestionMark); } extName = path.extname(extName); extName = extName ? extName.slice(1) : "unknown"; //判斷如果是接口訪問(wèn),則通過(guò)proxy轉(zhuǎn)發(fā) if(//svr/.*$/.test(pathName)){ proxy.web(req, res); return; } fs.exists(realPath, function(exists){ if(!exists){ res.writeHead(404, {"content-type": "text/plain"}); res.write("The request URL:" + realPath + " could not be found."); res.end(); return; } fs.readFile(realPath, "binary", function(err, file){ if(err){ res.writeHead(500, {"content-type": "text/plain"}); res.end(err); return; } var contentType = mine[extName] || "text/plain"; res.writeHead(200, {"content-type": contentType}); res.write(file, "binary"); res.end(); }); }); }); server.listen(8088);mime.js
這里參考shawn.xie的源碼,補(bǔ)充了幾個(gè)字體文件的mime。
exports.types = { "css": "text/css", "gif": "image/gif", "html": "text/html", "ico": "image/x-icon", "jpeg": "image/jpeg", "jpg": "image/jpeg", "js": "text/javascript", "json": "application/json", "pdf": "application/pdf", "png": "image/png", "svg": "image/svg+xml", "swf": "application/x-shockwave-flash", "tiff": "image/tiff", "txt": "text/plain", "wav": "audio/x-wav", "wma": "audio/x-ms-wma", "wmv": "video/x-ms-wmv", "xml": "text/xml", "woff": "application/x-woff", "woff2": "application/x-woff2", "tff": "application/x-font-truetype", "otf": "application/x-font-opentype", "eot": "application/vnd.ms-fontobject" };
以上是全部的源碼,配置中遇到幾個(gè)問(wèn)題說(shuō)明如下:
1、接口采用https,所以http-proxy需要配置證書,按照官方的配置如下:
var proxy = httpProxy.createProxyServer({ target: "https://192.168.101.166:8088", ssl: { key: fs.readFileSync("server_decrypt.key", "utf8"), cert: fs.readFileSync("server.crt", "utf8") }, secure: true });
其中target是接口的IP地址,ssl配置key和證書,secure默認(rèn)為true,運(yùn)行訪問(wèn)接口后,node控制臺(tái)提示:
{ [Error: unable to verify the first certificate] code: "UNABLE_TO_VERIFY_LEAF_SIGNATURE" }
google后,這段意思大致是說(shuō)證書未通過(guò)驗(yàn)證,通常在node中配置不驗(yàn)證證書即可。
rejectUnauthorized: false
但是我用的是http-proxy,沒(méi)有rejectUnauthorized這個(gè)參數(shù),再次閱讀文檔:
// // Create the proxy server listening on port 443 // httpProxy.createServer({ ssl: { key: fs.readFileSync("valid-ssl-key.pem", "utf8"), cert: fs.readFileSync("valid-ssl-cert.pem", "utf8") }, target: "https://localhost:9010", secure: true // Depends on your needs, could be false. }).listen(443);
其中secure這個(gè)參數(shù)的說(shuō)明很模糊,嘗試著將其設(shè)定為false,通過(guò)!
2、shawn.xie的源碼中,對(duì)于url中擴(kuò)展名的識(shí)別存在bug,比如這樣的URL識(shí)別會(huì)取到最后一個(gè)點(diǎn)的位置,本來(lái)應(yīng)該是woff2,結(jié)果卻是0。
http://localhost:8000/ab/resources/fonts/font.woff2?v=4.5.0
本來(lái)嘗試用正則處理,但是后向引用在js不支持,就老老實(shí)實(shí)的用indexOf解決:
var realPath = req.url.substring(1); var extName = realPath; var indexOfQuestionMark = extName.indexOf("?"); if(indexOfQuestionMark >= 0){ extName = extName.substring(0, indexOfQuestionMark); realPath = realPath.substring(0, indexOfQuestionMark); //realPath是文件的真實(shí)路徑,所以也要去掉擴(kuò)展名后面?之后的部分 } extName = path.extname(extName); extName = extName ? extName.slice(1) : "unknown";
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/79412.html
摘要:希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開(kāi)發(fā)者指南作者科迪林黎,由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開(kāi)發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí),老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址:Learning React.js is easier than you think 原文作...
摘要:所有支持的瀏覽器都會(huì)使用同源策略這個(gè)安全策略,所謂同源是指,域名,協(xié)議,端口相同,就是因?yàn)橥床呗缘挠绊憣?dǎo)致沒(méi)法直接用請(qǐng)求不同域上的數(shù)據(jù),所以各種解決問(wèn)題的技術(shù)出現(xiàn)了。 在日常的項(xiàng)目開(kāi)發(fā)時(shí)會(huì)不可避免的需要進(jìn)行跨域操作,面試中也是頻繁被經(jīng)常會(huì)問(wèn)到的問(wèn)題,本文只是我經(jīng)常用到的解決跨域的方式做個(gè)記錄與總結(jié)。 所有支持Javascript的 瀏覽器 都會(huì)使用‘同源策略’這個(gè)安全策略,所謂同源是...
摘要:并且這個(gè)對(duì)象屬性和方法允許指定請(qǐng)求細(xì)節(jié)和提取響應(yīng)數(shù)據(jù)。此請(qǐng)求不會(huì)被緩存。在發(fā)送完成請(qǐng)求以后,下一步將會(huì)取得響應(yīng)。 腳本化HTTP下面將會(huì)用js代碼操縱HTTP下面將會(huì)說(shuō)明在沒(méi)有導(dǎo)致web瀏覽器重新加載任何窗口或者窗體的情況下,腳本實(shí)現(xiàn)web瀏覽器和服務(wù)器之間的通信。ajax:為一種找早起避免頁(yè)面重載而動(dòng)態(tài)更新頁(yè)面的方式,不過(guò)現(xiàn)在是直接數(shù)據(jù)驅(qū)動(dòng),或者類似于vue的單頁(yè)應(yīng)用comet:這個(gè)...
摘要:同源策略所謂同源是指協(xié)議,域名,端口均相同。同源策略是瀏覽器的一個(gè)安全功能,不同源的客戶端腳本在沒(méi)有明確授權(quán)的情況下,不能讀寫對(duì)方資源。需注意的是由于同源策略的限制,所讀取的為跨域請(qǐng)求接口所在域的,而非當(dāng)前頁(yè)。 一、什么是跨域 1.URL解析 URL (Uniform Resource Locator )統(tǒng)一資源定位符(URL)是用于完整地描述Internet上網(wǎng)頁(yè)和其他資源的地址的...
摘要:服務(wù)端接收到請(qǐng)求后,通過(guò)該參數(shù)獲得回調(diào)函數(shù)名,并將數(shù)據(jù)放在參數(shù)中將其返回收到結(jié)果后因?yàn)槭菢?biāo)簽,所以瀏覽器會(huì)當(dāng)做是腳本進(jìn)行運(yùn)行,從而達(dá)到跨域獲取數(shù)據(jù)的目的。 在使用Vue搭建的一個(gè)后端管理系統(tǒng)中,我使用axios請(qǐng)求本地的Node環(huán)境下的接口,但是請(qǐng)求失敗,然后我錯(cuò)誤信息是:showImg(https://segmentfault.com/img/remote/1460000018521...
閱讀 2849·2021-09-24 09:47
閱讀 4466·2021-08-27 13:10
閱讀 3090·2019-08-30 15:44
閱讀 1354·2019-08-29 12:56
閱讀 2649·2019-08-28 18:07
閱讀 2699·2019-08-26 14:05
閱讀 2710·2019-08-26 13:41
閱讀 1325·2019-08-26 13:33