webpack/nginx websocket转发配置

webpack转发websocket配置

vue文件中路径配置

// 这里的转发标识为/api/ws
let path = "ws://"+window.location.host+"/api/ws";
let socket = new WebSocket(path);

webpack.dev.config.js中配置

devServer: {
      proxy: {
        // 普通http请求
        '/api': {
            target: 'http://localhost:8099/',
            changeOrigin: true,
            secure: false
        },
      // websocket请求配置 
        '/api/ws': {
          target: 'http://localhost:8099/',// 可以写http或者ws开头
          ws: true,
          secure: false,
          changeOrigin: true
        }

nginx中设置转发配置

location /api {
        proxy_redirect off;
        proxy_set_header Host $host:8099;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8090;
        
        proxy_buffer_size 64k;
        proxy_buffers   4 32k;
        proxy_busy_buffers_size 64k;
        proxy_temp_file_write_size 64k;
        proxy_ignore_client_abort on;
        proxy_connect_timeout       150s;
        proxy_send_timeout          150s;
        proxy_read_timeout          150s;   

   }
// 这里是websocket相关的配置
location /api/ws {
            proxy_pass http://192.168.233.238:8090;
            proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
            proxy_set_header Host $host;
            proxy_http_version 1.1; 
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto https;
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "upgrade"; 
            proxy_set_header Origin "";
            proxy_redirect off;
        }