• 环境描述：

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

---

• 问题：
  假如项目全盘使用http，则一切正常。
  域名由cloudflare托管后，全盘默认为 https，如此一来前后端程序都需要做修改以适应https。 静态网页这边倒是好办，按照常规方式 申请证书，设置443端口即可。但是api接口和websocks这部分就比较麻烦，改动也比较大。如果后端api接口程序不做修改，强行使用 ”https" + “http” 杂合方式来运作网站，虽然老版本的Chrome是可行的，但是从Chrome 86开始，就会报 “mixed content”错误了，让人烦不胜烦！

本方法利用nginx转发，将外网的https请求转发为本地http请求，这样后端程序就不需要做太多修改即可正常使用了，比较省事。

---

• 解决方案：

9. 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";
           }
   }
   

---

10. 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) {
    ...
    }
    

---

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

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

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

    this.ws = new WebSocket('wss://mysite.com/websocket')
    

---

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