介紹

最近寫(xiě)小程序，但是小程序的接口得通過(guò)https的形式訪問(wèn)，所以用nginx轉(zhuǎn)發(fā)了一下。想到Google搜索引擎會(huì)提高h(yuǎn)ttps網(wǎng)站的權(quán)重，索性把我的網(wǎng)站改造成同時(shí)支持http和https了。看效果

http形式訪問(wèn)

https形式訪問(wèn)

我是用LET'S ENCRYPT來(lái)生成證書(shū)的，這個(gè)應(yīng)該是用的最多的一個(gè)工具，也很方便。

我直接參考了官方文檔上關(guān)于在CentOS 7上用nginx來(lái)讓網(wǎng)站支持https的教程

1.下載

sudo?yum?install?certbot?python2-certbot-nginx

2.執(zhí)行命令

certbot?--nginx?-d?www.erlie.cc

如果不在這個(gè)目錄可以用--nginx-server-root這個(gè)參數(shù)來(lái)指定

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

如果要為多個(gè)域名生成的話

-d?域名1?-d?域名2

或者每次指定一個(gè)，執(zhí)行多次

如果選 1，則通過(guò) HTTP 和 HTTPS 都可以訪問(wèn)。

中途中可能會(huì)遇到各種環(huán)境問(wèn)題，Google解決即可。

我說(shuō)一個(gè)我遇到的坑，我原來(lái)編譯的時(shí)候沒(méi)有選擇SSL module，所以我得重新編譯一下，編譯完成之后我是用如下命令重啟的

nginx?-s?reload

結(jié)果https訪問(wèn)一直有問(wèn)題，后來(lái)我才意識(shí)到。sbin目錄下重新生成的nginx得重啟才能生效。

此時(shí)http://www.erlie.cc和https://www.erlie.cc就都可以訪問(wèn)了

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行就是前面的命令自動(dòng)幫你生成的，非常方便，都不用自己配置。

前端怎么寫(xiě)？

為了讓前端在訪客通過(guò)http方式訪問(wèn)的時(shí)候調(diào)用http接口。通過(guò)https訪問(wèn)的時(shí)候調(diào)用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);}})},//?獲取服務(wù)器地址getServerUrl?:?function(path)?{return?conf.serverHot?+?path;} }module.exports?=?_nb;

window.location.origin為拿到https://www.erlie.cc類似這樣的請(qǐng)求地址，可以在瀏覽器自己試一下

user-service.js
請(qǐng)求用戶相關(guān)的接口
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為請(qǐng)求參數(shù)

有道無(wú)術(shù)，術(shù)可成；有術(shù)無(wú)道，止于術(shù)

歡迎大家關(guān)注Java之道公眾號(hào)

好文章，我在看??

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的一个命令，让你的网站支持https的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。