2021-10-29 利用nginx实现https的websocket转发

利用nginx实现https的websocket转发

环境描述：

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

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

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

解决方案：

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

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

vue部分
项目使用axio实现ajax调用。只需要设置一下axio的baseURL即可：
```
axios.defaults.baseURL = 'https://mysite.com/api/'
```
在需要使用websockets的模块，是这样调用的：
```
this.ws = new WebSocket('wss://mysite.com/websocket')
```

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

2021-10-29 利用nginx实现https的websocket转发

利用nginx实现https的websocket转发

猜你喜欢