摘要:前端获取数据时经常会遇到跨域问题,用做反向代理就可以解决此问题。但是属于中间件代理,不同开发者布署的服务器地址可能不一样,这样的配置就不能做到通用了。那能不能仿照写了一个简单的服务器,用于非的项目呢。
前端获取数据时经常会遇到跨域问题,用 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 放静态页面
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/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、...
阅读 4019·2021-11-22 13:53
阅读 3617·2021-11-19 11:29
阅读 1264·2021-09-08 09:35
阅读 3161·2020-12-03 17:26
阅读 513·2019-08-29 16:06
阅读 2104·2019-08-26 13:50
阅读 1177·2019-08-23 18:32
阅读 2152·2019-08-23 18:12