摘要:搭建本地服務(wù)器參考了的搭建本地服務(wù)器做轉(zhuǎn)發(fā)使用實現(xiàn),官方文檔配置服務(wù)器和轉(zhuǎn)發(fā)接口地址判斷如果是接口訪問,則通過轉(zhuǎn)發(fā)這里參考的源碼,補充了幾個字體文件的。
起因:公司的產(chǎn)品更換前端框架,接口的訪問原本是通過nginx配置反向代理實現(xiàn)的,本地沒有安裝nginx,就用node.js做一個。
node.js搭建本地http服務(wù)器參考了shawn.xie的《nodejs搭建本地http服務(wù)器》
node.js做轉(zhuǎn)發(fā)使用node-http-proxy實現(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"; //判斷如果是接口訪問,則通過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的源碼,補充了幾個字體文件的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" };
以上是全部的源碼,配置中遇到幾個問題說明如下:
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默認為true,運行訪問接口后,node控制臺提示:
{ [Error: unable to verify the first certificate] code: "UNABLE_TO_VERIFY_LEAF_SIGNATURE" }
google后,這段意思大致是說證書未通過驗證,通常在node中配置不驗證證書即可。
rejectUnauthorized: false
但是我用的是http-proxy,沒有rejectUnauthorized這個參數(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這個參數(shù)的說明很模糊,嘗試著將其設(shè)定為false,通過!
2、shawn.xie的源碼中,對于url中擴展名的識別存在bug,比如這樣的URL識別會取到最后一個點的位置,本來應(yīng)該是woff2,結(jié)果卻是0。
http://localhost:8000/ab/resources/fonts/font.woff2?v=4.5.0
本來嘗試用正則處理,但是后向引用在js不支持,就老老實實的用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是文件的真實路徑,所以也要去掉擴展名后面?之后的部分 } extName = path.extname(extName); extName = extName ? extName.slice(1) : "unknown";
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/79412.html
摘要:希望幫助更多的前端愛好者學(xué)習。前端開發(fā)者指南作者科迪林黎,由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當你問起有關(guān)與時,老司機們首先就會告訴你其實是個沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習 React.js 比你想象的要簡單 原文地址:Learning React.js is easier than you think 原文作...
摘要:并且這個對象屬性和方法允許指定請求細節(jié)和提取響應(yīng)數(shù)據(jù)。此請求不會被緩存。在發(fā)送完成請求以后,下一步將會取得響應(yīng)。 腳本化HTTP下面將會用js代碼操縱HTTP下面將會說明在沒有導(dǎo)致web瀏覽器重新加載任何窗口或者窗體的情況下,腳本實現(xiàn)web瀏覽器和服務(wù)器之間的通信。ajax:為一種找早起避免頁面重載而動態(tài)更新頁面的方式,不過現(xiàn)在是直接數(shù)據(jù)驅(qū)動,或者類似于vue的單頁應(yīng)用comet:這個...
摘要:同源策略所謂同源是指協(xié)議,域名,端口均相同。同源策略是瀏覽器的一個安全功能,不同源的客戶端腳本在沒有明確授權(quán)的情況下,不能讀寫對方資源。需注意的是由于同源策略的限制,所讀取的為跨域請求接口所在域的,而非當前頁。 一、什么是跨域 1.URL解析 URL (Uniform Resource Locator )統(tǒng)一資源定位符(URL)是用于完整地描述Internet上網(wǎng)頁和其他資源的地址的...
摘要:服務(wù)端接收到請求后,通過該參數(shù)獲得回調(diào)函數(shù)名,并將數(shù)據(jù)放在參數(shù)中將其返回收到結(jié)果后因為是標簽,所以瀏覽器會當做是腳本進行運行,從而達到跨域獲取數(shù)據(jù)的目的。 在使用Vue搭建的一個后端管理系統(tǒng)中,我使用axios請求本地的Node環(huán)境下的接口,但是請求失敗,然后我錯誤信息是:showImg(https://segmentfault.com/img/remote/1460000018521...
閱讀 2788·2021-09-24 09:47
閱讀 4406·2021-08-27 13:10
閱讀 3055·2019-08-30 15:44
閱讀 1319·2019-08-29 12:56
閱讀 2627·2019-08-28 18:07
閱讀 2652·2019-08-26 14:05
閱讀 2634·2019-08-26 13:41
閱讀 1294·2019-08-26 13:33