微信公众号本地调试: vue+node反向代理

lydialy
524 阅读2分钟

前言

最近公司h5项目需要接入微信公众号中，因为微信开发者工具中设置了域名，导致本地localhost调试获取code提示返回地址错误问题。每次测试都要手动去获取一个code再调试，大大增加了开发的时间，而且很不方便呀。所以准备做个反向代理，在浏览器输入域名直接访问本地项目。

vuecli本地是可以设置使用域名+端口号来访问本地项目的，但是因为有端口号同样导致无法在本地测试。为了去掉端口号，我想到了使用node做反向代理把端口号去掉。这样就可以直接使用域名访问本地项目了。

什么是反向代理

反向代理，"它代理的是服务端"，主要用于服务器集群分布式部署的情况下，反向代理隐藏了服务器的信息。

反向代理的作用

  • 保证内网的安全，通常将反向代理作为公网访问地址，Web服务器是内网
  • 负载均衡，通过反向代理服务器来优化网站的负载

实现方式

域名解析到本地

端口转发

创建反向代理 server，需要安装http-proxy插件

  • 安装
npm install http-proxy

因为HTTP默认端口是80，所以我们需要监听80端口(因为是默认的所以地址栏里可以不输入:80,可以直接使用域名访问)。

// 要使用 HTTP 服务器和客户端，就必须引入http
 var http = require('http'),httpProxy = require('http-proxy');  
    
  // 新建一个代理 Proxy Server 对象  
  var proxy = httpProxy.createProxyServer({});  
    
  // 捕获异常  
  proxy.on('error', function (err, req, res) {  
        res.writeHead(500, {  
            'Content-Type': 'text/plain'  
        });  
       res.end('Something went wrong. And we are reporting a custom error message.');  
 });  
     
  
 var server =http.createServer(function(req, res) {  
      // 在这里可以自定义你的路由分发  
      var host = req.headers.host     
      switch(host){  
         case 'test.zks.com':   
            // 在每次请求中，调用 proxy.web(req, res config) 方法进行请求分发  
              proxy.web(req, res, { target: 'http://test.zks.com:8080/' });  
              break;  
         default:  
             res.writeHead(200, {  
                 'Content-Type': 'text/plain'  
             });  
           res.end('Welcome to my server!');  
      }  


 });  
   

 // 因为HTTP默认端口是80,HTTPS默认端口是443
 // 因为本地项目是http请求所以监听80端口。
 server.listen(80,function () {
      console.log("listening on port 80") 
 });

这样就可以了，然后在地址栏中输入 test.zks.com 就可以直接访问本地项目了。

avatar
文章
阅读
粉丝