• 环境描述：

1. web服务器为nginx，前端为一个vue项目
2. 后端为golang项目，为前端提供api服务
3. 域名的cname由cloudflare托管，并选择“始终使用HTTPS”
4. 前端需要使用websocket做实时显示和推送

---

• 问题：

1. 假如项目全盘使用http，则一切正常
2. nginx升级到https后，websocket失效，但强行使用http访问，勉强也能用
3. 改由cloudflare托管后，因为全盘默认为 https，所以也就无法再“勉强使用”了

---

• 解决方案：

1. nginx部分： 修改conf配置文件 首先按照常规方式配置https，比如申请证书，设置443端口等，然后再将URL的/api 以及 /websocket 做两个转发。nginx.conf 文件摘抄如下：

   server {
           # cloudflare始终使用https，因此80端口不需要再设置了	
           listen       443 ssl;
           server_name  mysite.com;
           # 证书路径：
           ssl_certificate      /cert/mysite.com.pem;
           ssl_certificate_key  /cert/mysite.com.key;
   
           ssl_session_cache    shared:SSL:1m;
           ssl_session_timeout  5m;
   
           ssl_ciphers  HIGH:!aNULL:!MD5;
           ssl_prefer_server_ciphers  on;
   
           location / {
               root   html;
               index  index.php index.html index.htm;
           }
   
           # 将https开头的 /api 路径转发到8080端口 ， 
           # 比如 https://mysite.com/api/getdata 将转为：http://127.0.0.1:8080/getdata
           location ~ /api/(.*) {
               proxy_pass http://127.0.0.1:8080/$1;
           }
   
           # 将https的 /websocket 转发到 http 的 8081
           location /websocket {
               proxy_pass http://127.0.0.1:8081/;
               proxy_http_version 1.1;
               proxy_set_header Upgrade $http_upgrade;
               proxy_set_header Connection "upgrade";
           }
   }
   

---

2. golang 部分 本程序使用的是Iris Web框架，其他框架大同小异即监听http的8080端口即可：

   app.Run(iris.Addr("0.0.0.0:8080"))
   

   Websocket这边是这样的：

   http.HandleFunc("/", ws) //ws是你的websocket处理函数
   http.ListenAndServe("0.0.0.0:8081", nil)
   
   func ws(w http.ResponseWriter, r *http.Request) {
   ...
   }
   

---

3. vue部分 项目使用axio实现ajax调用。只需要设置一下axio的baseURL即可：

   axios.defaults.baseURL = 'https://mysite.com/api/'
   

   在需要使用websockets的模块，是这样调用的：

   this.ws = new WebSocket('wss://rockage.net/websocket')
   

---

结语： 本方案比较简单，只是通过nginx将https请求映射成http而已，因此前后端程序无需做太多改动。