搭建並使用前端代理服務器

1、背景簡介：

目前流行的先後端分離項目，通常都處於不一樣的域名下，先後端開發過程當中，是分別部署在不一樣服
務器上，在作接口聯調時，會出現跨域的狀況，部署上線時，基本不存在這種須要，所以搭建一個
前端代理服務，方便開發。
做爲一個後端，須要瞭解下前端服務結構和基本操做流程。
本文主要是從前端的角度，使用React搭建一個簡易的測試項目，在本身搭建的代理服務的下實
現簡單的微信分享 demo。

2、項目基本結構

前端測試項目 `wechat-app`
   node代理服務 `proxy—server`
   後端接口服務 `wechat-server`

3、搭建步驟：

3.一、建立一個React項目

建立步驟：（默認機器已經裝好node環境和npm包管理工具）

      一、安裝React項目建立工具： 
            npm install -g create-react-app         
      二、建立項目： 
            create-react-app wechat-share
      三、切換到項目：
            cd wechat-share
      四、刪除src目錄下全部文件，新建一個index.js文件
      五、安裝開發必要工具包
            初始化：
            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中編寫前端代碼：
分享基本流程：
一、配置微信公衆號
二、編寫後端服務，前端從後端接口獲取微信配置參數（後端邏輯參考文檔實現）
三、初始化配置
四、檢驗js分享接口權限
五、從後端微信分享配置，初始化微信分享事件

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(
        <h1>Hello,World</h1>
    )
}
};
ReactDOM.render(
    <RequestClass/>,
    document.getElementById('root')
);

3.三、如今搭建代理服務proxy-server，在src目錄下新建proxy文件夾，編寫代理服務器代碼

一、node層代理了後端的 serverIp:serverPort/api 下的全部服務，而且對外開放了7080端口，
全部請求代理服務器7080端口的服務，都會被轉發到後端服務器上。
二、React項目的package.json文件中，配置了代理服務器地址，全部的接口請求都會經過7080端
口轉發到後端了。

step一、編寫代理服務  
"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');
});
step二、啓動代理服務：
    node start proxy-server.js
step三、配置wechat-app代理：
    打開項目package.json文件，在配置的最後一行，加上 
    "proxy": "http://127.0.0.1:7080"
step四、啓動wechat-app項目
     npm start

4、開發效果圖

配置React項目的代理：

微信測試公衆號配置：
  appID和appsecret是生成好的，再調用接口時須要使用。
  URL和Token是接口調用時，須要配置的,URL的域名須要在公網能夠訪問，以方便微信接口回調，
  Token做爲消息驗證
  JS接口安全域名：在微信分享時，須要校驗安全域名是否符合，不匹配的域名，分享的連接會顯示不正常。
  通常測試環境只能配置一個安全域名，線上環境最多能夠配置三個。

在微信測試工具中調試接口 ，點擊發送便可會出現比較漂亮的分享連接。

5、遇到的一些坑

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

6、參考文檔和工具連接

文檔：
   
   微信開發文檔：
   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