react开发公众号踩坑日志

最近在用react开发一个公众号产品。以前没有过开发公众号的经验，在这里记录一下过程中踩过的坑。
这个项目是前后端开发的。本篇文章只站在前端的视角，希望给大家一个参考

一.授权回调

微信授权过程

1. 进入你的程序
2. 跳转至微信授权接口
3. 用户确定授权
4. 重定向至你的程序

访问微信授权接口
这里注意使用window.location.href 而不是window.open去访问接口，不然可能会拦截弹出的新窗口
授权接口的路由需要和重定向的页面不同
如果调用授权的页面和配置的redirect_uri是同一个页面，会出现从redirect_uri页面后退时，又重新进入到调用授权页，导致无法退出的问题。
解决办法：可以写一个auth.js专门用于访问授权接口
http://pppercywang.com/auth -> 授权接口 -> http://pppercywang.com/home
Auth.jsx

componentWillMount(){
    let uuid = ""
    if(sessionStorage.getItem("uuid")!=null){
    uuid = sessionStorage.getItem("uuid")
    }else{
      uuid = this.uuid(32,8)
    }
    window.location.href = `http://zb.weaaacc369.com/api/Activity/auth.html?uuid=${uuid}`
    sessionStorage.setItem("uuid",uuid)
  }

访问授权页面时会出现请在微信客户端打开链接。我门可以使用微信开发者工具的公众号网页访问你的程序即可。

二.内网穿透

开发公众号一定要解决的一个问题就是内网穿透，不然后端每次都重定向到你部署前端程序的那台服务器。那你每次修改代码都需要重新部署。让其重定向至你本地的程序。这里大家可以使用花生壳进行内网穿透。是免费的

但是在本地肯定是需要设置跨域代理的。react可以直接在package.json中添加

"proxy":"http://zb.aaa.com/",

但是当你访问：26072r546n.qicp.vip时会出现Invalid Host header
因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。
解决办法：
1.在webpackDevServer.config.js中将disableHostCheck=true
2.在package.json配置的proxy会与其冲突，导致配置不生效。将其删除。使用http-proxy-middleware进行跨域代理

安装 http-proxy-middleware 插件：
$ npm install http-proxy-middleware --save
$ # 或
$ yarn add http-proxy-middleware

创建 src/setupProxy.js 并将以下内容放入该文件中(配置修改成自己的):

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy("/api",{
      "secure": false,
      "target": "http://zb.weikes2369.com/",
      "changeOrigin": true
    }));
};