资讯专栏INFORMATION COLUMN

搭建并使用前端代理服务器

lyning / 2372人阅读

摘要:本文主要是从前端的角度,使用搭建一个简易的测试项目,在自己搭建的代理服务的下实现简单的微信分享。在微信测试工具中调试接口,点击发送即可会出现比较漂亮的分享链接。

一、背景简介:

目前流行的前后端分离项目,一般都处于不同的域名下,前后端开发过程中,是分别部署在不同服
务器上,在做接口联调时,会出现跨域的情况,部署上线时,基本不存在这种需要,因此搭建一个
前端代理服务,方便开发。
作为一个后端,需要了解下前端服务结构和基本操作流程。
本文主要是从前端的角度,使用React搭建一个简易的测试项目,在自己搭建的代理服务的下实
现简单的微信分享 demo。

二、项目基本结构

   前端测试项目 `wechat-app`
   node代理服务 `proxy—server`
   后端接口服务 `wechat-server` 

三、搭建步骤:

3.1、创建一个React项目

 创建步骤:(默认机器已经装好node环境和npm包管理工具)

      1、安装React项目创建工具: 
            npm install -g create-react-app         
      2、创建项目: 
            create-react-app wechat-share
      3、切换到项目:
            cd wechat-share
      4、删除src目录下所有文件,新建一个index.js文件
      5、安装开发必要工具包
            初始化:
            npm init
            安装react、react-dom:
            npm install --save react react-dom
            安装axios(http请求工具)
            npm install -—save axios 
            安装微信jssdk
            npm install -—save weixin-js-sdk
            安装es6环境
            npm install --save-dev babel-cli
            npm install babel-core --save
            npm install --save babel-polyfill

   

3.2 在index.js中编写前端代码:
分享基本流程:
1、配置微信公众号
2、编写后端服务,前端从后端接口获取微信配置参数(后端逻辑参考文档实现)
3、初始化配置
4、检验js分享接口权限
5、从后端微信分享配置,初始化微信分享事件

    import React from "react";
    import ReactDOM from "react-dom";
    import wx from "weixin-js-sdk";
    import axios from "axios";

    let wxConfig={};
    let shareConfig={};
    function getData(response){
        if(response.status===200){
            var resData=response.data;
            return  resData;
        }else{
            console.log("response is error:",response);
            return {};
        }

    }
function getWxConfig(){
    return axios.post("share/mobile/getWXConfig",{"url":window.location.href})
        .then(function (response) {
            var resData=getData(response);
            if(resData.status&&resData.status===1){
                return resData.data;
            }else if(resData.data&&resData.data.message){
                alert(resData.data.message);
                return {};
            }
        }).catch(function(err){
            console.log(err);
        });
}

function getShareConfig(){
    return  axios.post(
        "/share/mobile/getShareInfo", {}).then( function (response) {
        var resData=getData(response);
        if(resData.status&&resData.status===1){
            return resData.data;
        }else if(resData.data&&resData.data.message){
            alert(resData.data.message);
            return {};
        }
    }).catch(function(err){
        console.log(err);
    });

}

async function init() {
wxConfig= await getWxConfig();
shareConfig =await getShareConfig();
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: wxConfig.appId, // 必填,公众号的唯一标识
    timestamp:wxConfig.timestamp , // 必填,生成签名的时间戳
    nonceStr: wxConfig.noncestr, // 必填,生成签名的随机串
    signature: wxConfig.signature,// 必填,签名,见附录1
    jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.checkJsApi({
    jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
    success: function(res) {
        console.log("checkJsApi init success!")
    }
});
wx.ready(function(){
    wx.onMenuShareAppMessage({
        title: shareConfig.title, // 分享标题
        link: shareConfig.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: shareConfig.imgUrl, // 分享图标
        success: function () {
            console.log("分享成功!")
        },
    });

})
}
init();

class RequestClass extends React.Component{
render () {
    return(
        

Hello,World

) } }; ReactDOM.render( , document.getElementById("root") );

3.3、现在搭建代理服务proxy-server,在src目录下新建proxy文件夹,编写代理服务器代码

1、node层代理了后端的 serverIp:serverPort/api 下的所有服务,并且对外开放了7080端口,
所有请求代理服务器7080端口的服务,都会被转发到后端服务器上。
2、React项目的package.json文件中,配置了代理服务器地址,所有的接口请求都会通过7080端
口转发到后端了。

   
step1、编写代理服务  
"use strict";
const express = require("express");
const path = require("path");
const app = express();
const request = require("request");

// 配置静态文件服务中间件
let serverUrl="http://serverIp:serverPort/api/";//server地址
app.use(express.static(path.join(__dirname, "./")));//静态资源index.html和node代码在一个目录下
app.use("/", function(req, res) {
    let url = serverUrl + req.url;
    console.log("request url==>",url);
    req.pipe(request(url)).pipe(res);
});

//本地服务代理在7080端口
app.listen(7080,"127.0.0.1", function () {
    console.log("proxy server is running at port 7080");
});
step2、启动代理服务:
    node start proxy-server.js
step3、配置wechat-app代理:
    打开项目package.json文件,在配置的最后一行,加上 
    "proxy": "http://127.0.0.1:7080"
step4、启动wechat-app项目
     npm start 
 
 
 

四、开发效果图

 配置React项目的代理:

微信测试公众号配置:
  appID和appsecret是生成好的,再调用接口时需要使用。
  URL和Token是接口调用时,需要配置的,URL的域名需要在公网可以访问,以方便微信接口回调,
  Token作为消息验证
  JS接口安全域名:在微信分享时,需要校验安全域名是否符合,不匹配的域名,分享的链接会显示不正常。
  一般测试环境只能配置一个安全域名,线上环境最多可以配置三个。

在微信测试工具中调试接口 ,点击发送即可会出现比较漂亮的分享链接。  

五、遇到的一些坑

react项目启动报错:react-scripts: command not found ,
解决方法:执行 npm install
如果还不行,则执行 rm  -rf node_mdules 然后执行 npm install
         
域名代理时,启动项目,通过本地代理域名访问报错:Invalid Host header
解决方法:在项目根目录下,新建一个隐藏文件  .env.development.local 
        设置不校验域名 DANGEROUSLY_DISABLE_HOST_CHECK=true
 
     

六、参考文档和工具链接

   文档:
   
   微信开发文档:
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
   微信测试公众号:
   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
   微信签名验签工具:  
   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
   微信分享的SDK:   
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
   axios文档:
   https://www.kancloud.cn/yunye/axios/234845
   es6入门:
   http://es6.ruanyifeng.com/#docs/async
   
   工具:
   
   webstorm下载:
   http://www.jetbrains.com/webstorm/
   微信开发者工具下载:
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
 
     

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51727.html

相关文章

  • 搭建使用前端代理务器

    摘要:本文主要是从前端的角度,使用搭建一个简易的测试项目,在自己搭建的代理服务的下实现简单的微信分享。在微信测试工具中调试接口,点击发送即可会出现比较漂亮的分享链接。 一、背景简介: 目前流行的前后端分离项目,一般都处于不同的域名下,前后端开发过程中,是分别部署在不同服 务器上,在做接口联调时,会出现跨域的情况,部署上线时,基本不存在这种需要,因此搭建一个 前端代理服务,方便开发。 作为一个...

    jasperyang 评论0 收藏0
  • Nginx

    摘要:此外,其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的,第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机(启用网卡二并使用桥接模式):A服务器:192.168.0.103 主B服务器:192.168.0.104 主(备) 前端工程师学习 Nginx ...

    syoya 评论0 收藏0
  • 前端跨域资源请求: JSONP/CORS/反向代理

    摘要:此时完成的跨域代理配置仅仅是在开发环境下生效,到了生产环境下如果是放到服务器上则还需要借助的反向代理来进行跨域的代理。跨域 指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对 JavaScript 施加的安全限制。同源就是指 域名,协议,端口 均相同。两个网域若 域名、协议、端口 任一不同则二者的通信就出现了跨域问题,前端的跨域问题普通存在于两个阶段,一个是开发环境...

    番茄西红柿 评论0 收藏0
  • [译] 用 Node.js 搭建 API Gateway

    摘要:协议转换微服务架构允许使用不同的协议以便于获得使用不同技术的优势。过于庞大的在实现时,应当避免将非通用逻辑如领域特定数据转换放入其中。服务应始终对其数据域拥有完全的所有权。构建一个过于庞大的,从服务团队争夺控制权,这违反了微服务的理念。 我们团队的后端服务中,一开始只有一个大服务,所有的东西都往里面写,可以想象下,当这个服务变得不断的庞大,将会变得多么难以维护。后来逐渐把一些数据服务抽...

    邹强 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<