介绍

最近写小程序，但是小程序的接口得通过https的形式访问，所以用nginx转发了一下。想到Google搜索引擎会提高https网站的权重，索性把我的网站改造成同时支持http和https了。看效果

http形式访问

https形式访问

我是用LET'S ENCRYPT来生成证书的，这个应该是用的最多的一个工具，也很方便。

我直接参考了官方文档上关于在CentOS 7上用nginx来让网站支持https的教程

1.下载

sudo yum install certbot python2-certbot-nginx

2.执行命令

certbot --nginx -d www.erlie.cc

如果不在这个目录可以用--nginx-server-root这个参数来指定

certbot --nginx --nginx-server-root=/yourpath -d www.erlie.cc

如果要为多个域名生成的话

-d 域名1 -d 域名2

或者每次指定一个，执行多次

如果选 1，则通过 HTTP 和 HTTPS 都可以访问。

中途中可能会遇到各种环境问题，Google解决即可。

我说一个我遇到的坑，我原来编译的时候没有选择SSL module，所以我得重新编译一下，编译完成之后我是用如下命令重启的

nginx -s reload

结果https访问一直有问题，后来我才意识到。sbin目录下重新生成的nginx得重启才能生效。

此时http://www.erlie.cc和https://www.erlie.cc就都可以访问了

nginx.conf配置

server {listen       80;server_name  www.erlie.cc;#charset koi8-r;access_log  /usr/local/nginx/logs/access.log combined;location = / {root   /product/new-blog-fe/dist/view;index  index.html;}location ~ .*\.html$ {root   /product/new-blog-fe/dist/view;index  index.html;}location / {proxy_pass  http://127.0.0.1:8080/;}location ~ .*\.(gif|jpeg|png|bmp|swf|flv|ico)$ {root   /product/new-blog-fe;if (-f $request_filename) {expires 1d;break;}}location ~ .*\.(js|css)?$ {root   /product/new-blog-fe;if (-f $request_filename) {expires 1d;break;}}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}listen 443 ssl; # managed by Certbotssl_certificate /etc/letsencrypt/live/www.erlie.cc/fullchain.pem; # managed by Certbotssl_certificate_key /etc/letsencrypt/live/www.erlie.cc/privkey.pem; # managed by Certbotinclude /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbotssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

最后面的5行就是前面的命令自动帮你生成的，非常方便，都不用自己配置。

前端怎么写？

为了让前端在访客通过http方式访问的时候调用http接口。通过https访问的时候调用https接口，我是这样做的

nb.js

var conf = {serverHot : window.location.origin
};
var _nb = {request: function (param) {var _this = this;$.ajax({type       : param.method || 'get',url        : param.url || '',dataType   : param.type || 'json',data       : param.data || '',xhrFields  : {withCredentials: true},crossDomain: true,contentType: param.contentType || 'application/x-www-form-urlencoded;charset=UTF-8',success: function (res) {typeof param.success === 'function' && param.success(res.data, res.msg);},error: function (err) {typeof param.error === 'function' && param.error(err.statusText);}})},// 获取服务器地址getServerUrl : function(path) {return conf.serverHot + path;}
}module.exports = _nb;

window.location.origin为拿到https://www.erlie.cc类似这样的请求地址，可以在浏览器自己试一下

user-service.js
请求用户相关的接口

var _nb = require('util/nb.js');var _user = {// 用户登录login : function(userInfo, resolve, reject){_nb.request({url     : _nb.getServerUrl('/user/login'),data    : userInfo,method  : 'POST',success : resolve,error   : reject});}
}
module.exports = _user;

userInfo为请求参数

好文章，我在看❤️