用Nginx实现微信小程序本地SSL请求

2018-10-03  本文已影响66人  豆瓣奶茶

更新:由于现在小程序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的开发者一些参考。

上一篇下一篇

猜你喜欢

热点阅读