前言
之前做微信code获取的调试都是部署到服务器上比较麻烦。这次总结了一下前端怎么在本地就能获取微信code。本项目是在mac上用react开发，所以教程内容偏向这俩。内容仅供参考，有更好的办法可以留言，互相学习一下～
准备工作
有资质的公众号。并加入你为开发者。备案的域名。微信开发者工具。查看微信文档https://developers./doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html教程
以上工作准备全，前端就需要实现
其中我们要解决的就是本地项目启动地址改为https+域名，才能调试redirect_uri重定向。
如何将本地项目启动的ip改为域名
修改hosts
找到电脑hosts路径 打开后将127.0.0.1改为 127.0.0.1 域名。
mac系统推荐一个小软件配置hosts很方便 【SwitchHosts】
//路径win C:\Windows\System32\drivers\etc\hostsmac usr/etc/hosts
修改项目配置
在webpack中加入刚配好的域名， 找到node_modules/webpack-dev-server/lib 的Server.js 找到如下处添加修改
// always allow localhost host, for convience// if (hostname === 'localhost') return true;if(hostname === "127.0.0.1" || hostname === "localhost" || hostname === "域名") return true;
修改端口号
将本地项目启动的端口号改为443，这样不加端口号也能访问本地项目。
我是react 项目 ，找到scripts/start.js
// Tools like Cloud9 rely on this.const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 443;
package.json
"start": "set PORT=443 node scripts/start.js",
重启项目即可用域名访问本地项目。
如何将本地项目http改为https
https需要证书，所以我们通过在本地配置一个证书来实现https。
配置过程
macOS 使用 brew 安装 mkcert
安装 brew 命令
/bin/zsh -c "$(curl -fsSL /cunkai/HomebrewCN/raw/master/Homebrew.sh)" //推荐1中科大
安装mkcert
brew install mkcertbrew install nss
windows 使用 scoop 安装 mkcert
scoop bucket add extrasscoop install mkcert
创建 CA 证书到本地
在终端中执行：
mkcert -install
生成证书（ localhost 127.0.0.1 后面还可以空格添加其他域名或IP地址）
mkcert localhost 127.0.0.1 域名
找到证书 rootCA.pem
mkcert -CAROOT
将CA证书放到react项目中
在项目根目录下新建一个 .cert 文件夹，将 rootCA.pem 文件放入文件夹中
在项目根目录的终端中执行：
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/rootCA.pem “localhost”
效果如下
修改react项目中的启动命令
在启动命令中添加：
HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem
最终代码如下
"scripts": {"start": "set PORT=443 && HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem node scripts/start.js","build": "node scripts/build.js","test": "node scripts/test.js"},
重启项目即可，效果如下。
到此为止，你已经可以无需部署服务器，在本地调用微信授权获取code后再重定向回到本地项目了。
获取到code后，我的项目还需调用微信支付，这块目前还的部署服务器在真机上测试。最近发现一个免部署的可以真机测试的内网穿透，研究好再发上来，大家一起讨论。
