搭建并使用前端代理服務(wù)器

lyning 發(fā)布于2019-08-01 18:25 / 2468人閱讀

摘要：本文主要是從前端的角度，使用搭建一個(gè)簡(jiǎn)易的測(cè)試項(xiàng)目，在自己搭建的代理服務(wù)的下實(shí)現(xiàn)簡(jiǎn)單的微信分享。在微信測(cè)試工具中調(diào)試接口，點(diǎn)擊發(fā)送即可會(huì)出現(xiàn)比較漂亮的分享鏈接。

一、背景簡(jiǎn)介：

目前流行的前后端分離項(xiàng)目，一般都處于不同的域名下，前后端開發(fā)過(guò)程中，是分別部署在不同服
務(wù)器上，在做接口聯(lián)調(diào)時(shí)，會(huì)出現(xiàn)跨域的情況，部署上線時(shí)，基本不存在這種需要，因此搭建一個(gè)
前端代理服務(wù)，方便開發(fā)。
作為一個(gè)后端，需要了解下前端服務(wù)結(jié)構(gòu)和基本操作流程。
本文主要是從前端的角度，使用React搭建一個(gè)簡(jiǎn)易的測(cè)試項(xiàng)目，在自己搭建的代理服務(wù)的下實(shí)
現(xiàn)簡(jiǎn)單的微信分享 demo。

二、項(xiàng)目基本結(jié)構(gòu)

   前端測(cè)試項(xiàng)目 `wechat-app`
   node代理服務(wù) `proxy—server`
   后端接口服務(wù) `wechat-server`

三、搭建步驟：

3.1、創(chuàng)建一個(gè)React項(xiàng)目

 創(chuàng)建步驟：（默認(rèn)機(jī)器已經(jīng)裝好node環(huán)境和npm包管理工具）

      1、安裝React項(xiàng)目創(chuàng)建工具： 
            npm install -g create-react-app         
      2、創(chuàng)建項(xiàng)目： 
            create-react-app wechat-share
      3、切換到項(xiàng)目：
            cd wechat-share
      4、刪除src目錄下所有文件，新建一個(gè)index.js文件
      5、安裝開發(fā)必要工具包
            初始化：
            npm init
            安裝react、react-dom：
            npm install --save react react-dom
            安裝axios(http請(qǐng)求工具)
            npm install -—save axios 
            安裝微信jssdk
            npm install -—save weixin-js-sdk
            安裝es6環(huán)境
            npm install --save-dev babel-cli
            npm install babel-core --save
            npm install --save babel-polyfill

3.2 在index.js中編寫前端代碼：
分享基本流程：
1、配置微信公眾號(hào)
2、編寫后端服務(wù)，前端從后端接口獲取微信配置參數(shù)（后端邏輯參考文檔實(shí)現(xiàn)）
3、初始化配置
4、檢驗(yàn)js分享接口權(quán)限
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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
    appId: wxConfig.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp:wxConfig.timestamp , // 必填，生成簽名的時(shí)間戳
    nonceStr: wxConfig.noncestr, // 必填，生成簽名的隨機(jī)串
    signature: wxConfig.signature,// 必填，簽名，見附錄1
    jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
wx.checkJsApi({
    jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline"], // 需要檢測(cè)的JS接口列表，所有JS接口列表見附錄2,
    success: function(res) {
        console.log("checkJsApi init success!")
    }
});
wx.ready(function(){
    wx.onMenuShareAppMessage({
        title: shareConfig.title, // 分享標(biāo)題
        link: shareConfig.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
        imgUrl: shareConfig.imgUrl, // 分享圖標(biāo)
        success: function () {
            console.log("分享成功！")
        },
    });

})
}
init();

class RequestClass extends React.Component{
render () {
    return(
        Hello,World
    )
}
};
ReactDOM.render(
    ,
    document.getElementById("root")
);

3.3、現(xiàn)在搭建代理服務(wù)proxy-server，在src目錄下新建proxy文件夾，編寫代理服務(wù)器代碼

1、node層代理了后端的 serverIp:serverPort/api 下的所有服務(wù)，并且對(duì)外開放了7080端口，
所有請(qǐng)求代理服務(wù)器7080端口的服務(wù)，都會(huì)被轉(zhuǎn)發(fā)到后端服務(wù)器上。
2、React項(xiàng)目的package.json文件中，配置了代理服務(wù)器地址，所有的接口請(qǐng)求都會(huì)通過(guò)7080端
口轉(zhuǎn)發(fā)到后端了。

   
step1、編寫代理服務(wù)  
"use strict";
const express = require("express");
const path = require("path");
const app = express();
const request = require("request");

// 配置靜態(tài)文件服務(wù)中間件
let serverUrl="http://serverIp:serverPort/api/";//server地址
app.use(express.static(path.join(__dirname, "./")));//靜態(tài)資源index.html和node代碼在一個(gè)目錄下
app.use("/", function(req, res) {
    let url = serverUrl + req.url;
    console.log("request url==>",url);
    req.pipe(request(url)).pipe(res);
});

//本地服務(wù)代理在7080端口
app.listen(7080,"127.0.0.1", function () {
    console.log("proxy server is running at port 7080");
});
step2、啟動(dòng)代理服務(wù)：
    node start proxy-server.js
step3、配置wechat-app代理：
    打開項(xiàng)目package.json文件，在配置的最后一行，加上 
    "proxy": "http://127.0.0.1:7080"
step4、啟動(dòng)wechat-app項(xiàng)目
     npm start

四、開發(fā)效果圖

 配置React項(xiàng)目的代理：

微信測(cè)試公眾號(hào)配置：
  appID和appsecret是生成好的，再調(diào)用接口時(shí)需要使用。
  URL和Token是接口調(diào)用時(shí)，需要配置的,URL的域名需要在公網(wǎng)可以訪問(wèn)，以方便微信接口回調(diào)，
  Token作為消息驗(yàn)證
  JS接口安全域名：在微信分享時(shí)，需要校驗(yàn)安全域名是否符合，不匹配的域名，分享的鏈接會(huì)顯示不正常。
  一般測(cè)試環(huán)境只能配置一個(gè)安全域名，線上環(huán)境最多可以配置三個(gè)。

在微信測(cè)試工具中調(diào)試接口 ，點(diǎn)擊發(fā)送即可會(huì)出現(xiàn)比較漂亮的分享鏈接。

五、遇到的一些坑

react項(xiàng)目啟動(dòng)報(bào)錯(cuò)：react-scripts: command not found ，
解決方法：執(zhí)行 npm install
如果還不行，則執(zhí)行 rm  -rf node_mdules 然后執(zhí)行 npm install
         
域名代理時(shí)，啟動(dòng)項(xiàng)目，通過(guò)本地代理域名訪問(wèn)報(bào)錯(cuò)：Invalid Host header
解決方法：在項(xiàng)目根目錄下，新建一個(gè)隱藏文件  .env.development.local 
        設(shè)置不校驗(yàn)域名 DANGEROUSLY_DISABLE_HOST_CHECK=true

六、參考文檔和工具鏈接

   文檔：
   
   微信開發(fā)文檔：
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
   微信測(cè)試公眾號(hào)：
   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
   微信簽名驗(yàn)簽工具：  
   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/
   微信開發(fā)者工具下載：
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

GPU云服務(wù)器云服務(wù)器使用webrtc搭建前端視頻聊天室并使用云服務(wù)器并使用云服務(wù)器端怎么租用阿里云服務(wù)器并使用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51727.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lyning

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

GreenCloudVPS：黑色星期五，八周年促銷，VPS年付五折起，10G口大盤雞年付 $30起，

閱讀 1712·2021-10-28 09:32
自動(dòng)化會(huì)提高測(cè)試覆蓋率，那測(cè)試覆蓋率是什么？

閱讀 615·2021-09-24 09:47
【保姆級(jí)教程】從零到精通Git，CodeChina實(shí)戰(zhàn)

閱讀 2937·2021-09-02 15:11
DediPath夏季促銷：美國(guó)服務(wù)器可選洛杉磯和紐約機(jī)房/E3/16GB/2TB/1Gbps端口月流

閱讀 2742·2021-08-09 13:46
css權(quán)重

閱讀 2893·2019-08-30 15:55
前端技能拾遺

閱讀 1078·2019-08-30 15:54
純CSS實(shí)現(xiàn)下拉菜單

閱讀 3313·2019-08-29 14:12
微信小程序開發(fā)早知道

閱讀 816·2019-08-26 13:40

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

搭建并使用前端代理服務(wù)器

Hello,World

相關(guān)文章