更新：由于现在小程序IDE已经自带“不校验请求域名以及TSL版本”的功能，不需要在本地配置这些复杂的环境来开发了。但本文依然可以作为在本地模拟生产环境的一种方法。
在11月3日微信小程序发布公测后，相信很多人已经顺利获得资格并拿到appId。但当你把之前的项目换上刚拿到的appId后会发现原来的wx.request和其他请求都不能用了。
image
</figure>
原来，在一个设置过appId的小程序项目里，任何请求url都必须是微信公众平台设置过的域名。你需要登录微信公众平台，在设置 > 开发设置 > 服务器配置中填写域名。注意这里不支持localhost，127.0.0.1等，只支持像example.com这样的真实域名，且需要SSL。
image
</figure>
当把域名配置好后，在小程序IDE里就能给这些域名发送请求了。然而我们并不想每次测试时都部署到服务器上，必须在本地搭建一个合适的开发环境。大致分三步：
1. 修改hosts文件
先找到hosts文件
Mac目录：/etc/hosts
PC目录： C:\Windows\System32\drivers\etc\hosts
然后添加下面这行，将合法域名映射到本地，再保存
127.0.0.1 yourdomain.com
2. 生成自签名SSL证书
首先需要有OpenSSL。Mac是自带的，无须再安装；PC可以使用git-bash这类工具
这是生成自签名证书的教程 How to create a self-signed Certificate，下面是我简化的版本，如果懒得看英文原版可以直接往下看。
打开命令行：
1. 生成Private Key
输入命令 openssl genrsa -des3 -out server.key 1024
2. 生成CSR (Certificate Signing Request)
输入命令 openssl req -new -key server.key -out server.csr
然后根据提示依次输入信息，域名不要填错
3. 移除Passphrase
cp server.key http://server.key.org
openssl rsa -in http://server.key.org -out server.key
4.生成自签名证书
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
完成了以上4步后，将server.crt和server.key移到你想要存放证书的地方。
3. 安装和配置 nginx
接下来需要通过nginx来载入SSL证书 ，这样就可以向本地服务器发送https请求了。
Mac命令行运行brew install nginx来安装，如果不知道brew是什么可以搜下HomeBrew。PC上可以直接下载Nginx安装包 nginx for Windows
然后修改nginx配置文件，在Mac的路径是/usr/local/etc/nginx/nginx.conf，在PC的路径是你的安装路径，里面找nginx.conf这个文件。打开后在此添加一个server，并将刚才生成的crt和key目录放在相应的位置，如下：
server {
listen 443 ssl;
ssl_certificate /ssl/server.crt; # 刚生成的crt
ssl_certificate_key /ssl/server.key; # 刚生成的key
server_name yourdomain.com; # 你的域名
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1;
location / {
proxy_pass http://127.0.0.1:3000; # 本地服务器地址及端口
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-Forward-Proto https;
proxy_http_version 1.1;
# for websocket
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
改完保存，并运行nginx。
Mac：sudo nginx
PC：直接双击安装目录下nginx.exe
4. 测试
根据以上的配置，就可以在小程序IDE直接向本地域名发送https请求了。此请求会发送到 http://127.0.0.1:3000/login
wx.request({
url: 'https://yourdomain.com/login',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success: function(res){
// success
}
})
完毕，这就是如何搭建小程序在本地模拟请求远程https服务器的方法 。希望能给刚拿到小程序appId的开发者一些参考。
网友评论