Nginx 解决WebSocket TCP 转发问题

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;


    gzip  on;
     map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }


    server {
        listen       80;
        server_name  manage.tbnb1.cn;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

    proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        location / {
        proxy_pass http://127.0.0.1:8081;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
        }
        
    }
server {
        listen       80;
        server_name  sso.tbnb1.cn;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

    proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        location / {
        proxy_pass http://127.0.0.1:8099;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
        }
        
    }
    server {
        listen       80;
        server_name  q.tbnb1.cn;


        #charset koi8-r;

        #access_log  logs/host.access.log  main;
    
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        location / {
        proxy_pass http://127.0.0.1:8089;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
        }
        
    }
    server {
        listen       80;
        server_name  message.tbnb1.cn;


        #charset koi8-r;

        #access_log  logs/host.access.log  main;
    
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        location / {
        proxy_pass http://127.0.0.1:8083;
        
        
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        }
        
    }


    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nginx是一个高性能的HTTP和反向代理服务器,它也可以用于解决跨域问题。而vue是一种流行的JavaScript框架,用于构建用户界面。WebSocket是一种在单个TCP连接上进行全双工通信的协议。 要解决nginx、vue和WebSocket跨域问题,我们可以进行以下步骤: 首先,在nginx服务器上进行配置,允许来自vue应用的请求。可以通过在nginx的配置文件中添加以下内容来实现: ``` location /api { add_header 'Access-Control-Allow-Origin' '*' always; proxy_pass http://localhost:3000; # 替换为vue应用的地址 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; } ``` 上述配置中,我们使用`add_header`指令添加了`Access-Control-Allow-Origin`头,允许来自任何域的请求。同时,我们通过`proxy_pass`指令将对`/api`路径的请求转发到vue应用的地址。 接下来,在vue应用中,我们需要使用WebSocket与后端建立连接。可以使用`WebSocket`对象创建一个新的WebSocket实例,并指定与后端的WebSocket通信地址。 例如,在vue组件中使用WebSocket: ```javascript mounted() { const socket = new WebSocket('ws://localhost:8000/ws'); // 替换为实际的后端地址 socket.onopen = function () { console.log('WebSocket connected'); }; socket.onmessage = function (event) { console.log('Received message:', event.data); }; socket.onclose = function () { console.log('WebSocket closed'); }; // 其他操作... } ``` 在上述代码中,我们创建了一个WebSocket实例,并指定了与后端的WebSocket通信地址。然后,我们监听WebSocket的`onopen`、`onmessage`和`onclose`事件,处理与后端的通信逻辑。 通过以上配置和操作,我们可以实现nginx、vue和WebSocket的跨域通信。nginx作为反向代理服务器,通过配置`Access-Control-Allow-Origin`头解决跨域问题,同时将WebSocket的通信请求转发到vue应用的地址。在vue应用中,我们使用WebSocket对象与后端建立连接,并进行数据通信。这样,我们就可以实现nginx、vue和WebSocket的跨域通信。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值