Vue项目配置WSS（Websocket SSL）双向认证

本地运行设置

修改webpack配置

......
devServer: {
    proxy:{  
        '/socket':{
            target: "wss://xxx.xxx.xxx.xxx:xxxx",
            changeOrigin:true,
            agent: new https.Agent(options),
            secure: true,
            ws: true,
            pathRewrite:{
              '^/socket':''
            }
        },
    }
}

Nginx服务器设置

修改nginx.cnf

server {
......
  location / {
      try_files $uri $uri/ index.html;
  }
  location /socket/ {
    proxy_pass https://xxx.xxx.xxx.xxx:xxxx/;
    proxy_ssl_trusted_certificate /web_gantt/ca/ca.pem;
    proxy_ssl_certificate     /web_gantt/ca/cert.pem;
    proxy_ssl_certificate_key /web_gantt/ca/key.pem;
    proxy_set_header X-real-ip $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Upgrade $http_upgrade; #wss
    proxy_set_header Connection "upgrade"; #wss
  }
}

访问

new WebSocket("wss://"+location.host+"/socket")