介紹

最近寫小程序，但是小程序的接口得通過https的形式訪問，所以用nginx轉發了一下。想到Google搜索引擎會提高https網站的權重，索性把我的網站改造成同時支持http和https了?？葱Ч?/p>

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為請求參數

有道無術，術可成；有術無道，止于術

歡迎大家關注Java之道公眾號

好文章，我在看??

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。