摘要:前端獲取數據時經常會遇到跨域問題,用做反向代理就可以解決此問題。但是屬于中間件代理,不同開發者布署的服務器地址可能不一樣,這樣的配置就不能做到通用了。那能不能仿照寫了一個簡單的服務器,用于非的項目呢。
前端獲取數據時經常會遇到跨域問題,用 nginx 做反向代理就可以解決此問題。但是 nginx 屬于中間件代理,不同開發者布署的 web 服務器地址可能不一樣,這樣 nginx 的配置就不能做到通用了。
如果能有一個客戶端代理,隨著項目源代碼提交,這樣就可以免去不同開發者的代理配置。webpack-dev-server 就是這樣的一個客戶端代理,但是如果項目沒有用到 webpack,那就沒辦法用了。那能不能仿照寫了一個簡單的 web 服務器,用于非 webpack 的項目呢。下面是代碼,望大佬們批評指正。
const request = require("request"); const express = require("express"); const path = require("path"); const app = express(); // 代理配置 const proxyTable = { "/api": { target: "http://localhost/api" } }; app.use(function(req, res,next) { const url = req.url; if (req.method == "OPTIONS") { console.log("options_url: ", url); // 設置cors 跨域 // res.header("Access-Control-Allow-Origin", req.headers.origin || "*"); // res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With"); // res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 設置 cookie // res.header("Access-Control-Allow-Credentials", true); res.status(200).send("OK"); return; } // console.log("req_url: ", url); next(); }); // 設置靜態目錄 app.use(express.static(path.join(__dirname, "static"))); app.use("/", function(req, res) { const url = req.url; const proxy = Object.keys(proxyTable); let not_found = true; for (let index = 0; index < proxy.length; index++) { const k = proxy[index]; const i = url.indexOf(k); if (i >= 0) { not_found = false; const element = proxyTable[k]; const newUrl = element.target + url.slice(i+k.length); req.pipe(request({url: newUrl, timeout: 60000},(err)=>{ if(err){ console.log("error_url: ", err.code,url); res.status(500).send(""); } })).pipe(res); break; } } if(not_found) { console.log("not_found_url: ", url); res.status(404).send("Not found"); } else { console.log("proxy_url: ", url); } }); // 監聽端口 const PORT = 8080; app.listen(PORT, () => { console.log("HTTP Server is running on: http://localhost:%s", PORT); });
PS:static 放靜態頁面
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100533.html
摘要:既然前段工程化是基于,那么選擇做前后端分離部署也是理所應當的。有了這三個東西,我們就可以搭建出最簡單的前端服務器了。 前后端分離開發應該已經是很多公司的標配了,然而,在前端工程化的體系下,開發環境代碼和生產環境代碼往往是平級的,不再是整個文件夾往服務器上一扔就了事,這讓每次的部署過程相當繁瑣。 如下是常見的項目目錄: Project └──javaSrc └──app ...
摘要:安裝及線上環境配置安裝官方安裝說明地址執行命令至此,安裝完成版本查看安裝官方文檔地址首次安裝執行命令以后創建項目只需在你需要的路徑下執行開發測試環境下直接執行以下命令啟動項目后面加上可以在修改現有文件后自動進行重啟瀏覽器輸入即可 centos+node.js+nest.js+caddy+pm2安裝及線上環境配置 node.js安裝 官方安裝說明地址 https://github.com...
摘要:創建成功后進入文件夾執行執行作用創建文件,維護項目的依賴文件解釋創建文件執行作用用系統的編輯器打開文件。我的技術新群上一篇前后端分離項目實踐分析下一篇公司項目實踐 一、前言 前端如何獨立用nodeJs實現一個簡單的注冊、登錄功能,是不是只用nodejs+sql就可以了?其實是可以實現,但離實際應用還有距離,那要怎么做才是實際可用的。 網上有很多nodeJs的示例,包括和 sql /...
摘要:當然需要的工具不只有這些,其他的一些可選工具還有文件壓縮壓縮時用到的文件重命名檢查一般編輯器自帶校驗提示工具等等,具體根據項目需要安裝。 gulp 前端自動化構建工具 需要配置nodejs環境, 利用npm安裝全局gulp,安裝后可以輸入gulp指令。 npm install gulp -g 創建項目目錄、初始化npm包、gulp npm init gulp init 下載gul...
摘要:連接數據庫如果不自己創建默認數據庫會自動生成地址跟第一步的地址對應。現在回過頭來看里面的入口文件最后,我們在瀏覽器輸入,就會跳到。到此為止,我們就完成了整個前后端各自開發到正式部署的流程。 一個完整的網站服務架構包括:1、web frame ---這里應用express框架2、web server ---這里應用nodejs3、Database ---這里應用monggoDB4、...
閱讀 4028·2021-11-22 13:53
閱讀 3625·2021-11-19 11:29
閱讀 1275·2021-09-08 09:35
閱讀 3171·2020-12-03 17:26
閱讀 517·2019-08-29 16:06
閱讀 2110·2019-08-26 13:50
閱讀 1187·2019-08-23 18:32
閱讀 2155·2019-08-23 18:12