开发中遇到的问题开发中遇到的一个问题是后台API和前端页面是分开开发的,但是开发的时候不想搭建后台环境本地,因为很麻烦!很麻烦!很麻烦!例如配置运行环境,安装数据库和服务器。乱七八糟的,有时候光是修环境就得花上一整天的时间。但是如果你不配置它,你就无法开发它。最重要的是你在请求后端API的时候会遇到跨域的问题。最简单的方法当然是在后台帮忙配置一个CORS。但是如果后端不能配合的话,可能就比较麻烦了。这时候可以使用反向代理进行开发。正向代理和反向代理首先普及一下代理。代理分为正向代理和反向代理。服务器获取内容,客户端向代理发送请求并指定目标(原服务器),然后代理将请求转发给原服务器,并将获取的内容返回给客户端。客户端可以使用正向代理。--摘自百度百科反向代理(ReverseProxy)是指使用代理服务器接受互联网上的连接请求,然后将请求转发给内网的服务器,并将从服务器得到的结果返回给请求的客户端在Internet上连接时,代理服务器充当外部世界的反向代理服务器。--摘自百度百科两者的主要区别在于代理的对象不同:正向代理的对象是客户端,反向代理的对象是服务器。我们遇到的问题是需要使用反向代理来解决。刚开始看代码的时候,说到反向代理,第一反应肯定是Nginx。确实Nginx反代确实不错,但是说实话没必要专门安装Nginx来做API代理。还要学习Nginx的配置。另外,你可能会想到webpack。当然,如果你使用webpack,你可以直接使用webpack-dev-server。但是接手手头的老项目就比较尴尬了。下面进入正题,使用express作为开发代理服务器。首先安装express、http-proxy-middleware和connect-timeout(这个模块是用来处理超时的):npminstall--save-devexpresshttp-proxy-middlewareconnect-timeout##如果有问题可以试试以下代码安装npminstall--save-devexpress@4.16.2http-proxy-middleware@0.17.4connect-timeout@1.9.0express是一个基于Node.js平台的快速、开放和最小的Web开发框架。http-proxy-middleware是专门用于http代理的node中间件,适用于connect、express、browser-sync等,由流行的http-proxy驱动。然后创建一个proxy-server.js文件。constexpress=require('快递');consttimeout=require('connect-timeout');constproxy=require('http-proxy-middleware');constapp=express();//这里从环境变量中读取配置,方便命令行启动//HOST指的是目标地址//PORT服务端口const{HOST='http://10.10.0.21:9080',PORT='3300'}=进程.env;//超时constTIME_OUT=30*1e3;//设置端口app.set('port',PORT);//设置超时返回超时响应app.use(timeout(TIME_OUT));app.use((req,res,next)=>{if(!req.timedout)next();});//静态页面//这里一般设置你的静态资源路径app.use('/',express.static('static'));//反向代理(这里可以配置需要反向的路径)//eg:Proxy/api/testto${HOST}/api/testapp.use(proxy('/api/test',{target:HOST}));//监听端口app.listen(app.get('port'),()=>{console.log(`serverrunning@${app.get('port')}`);});启动nodeproxy-server.js然后在浏览器中打开http://localhost:3300动态设置端口和反向代理地址HOST=http://10.0.1.10:8081PORT=3301nodeproxy-server.js需要此时可以在http://localhost:3301访问。至此,一个简单易用的开发环境就做好了。理论介绍参考:反向代理为什么叫反向代理?简述正向代理和反向代理
