Web 套接字的 apache 代理配置问题

Question

我有一个关于 apache 代理 2.4.48 配置的问题

我在本地 PC 中复制的基础设施如下：

后端监听5002端口
前端监听5003端口
apache 代理侦听 80 端口，配置如下：

proxy.conf

RewriteEngine on
RewriteCond %{HTTP:UPGRADE} ^websocket$ [NC]
RewriteCond %{HTTP:CONNECTION} Upgrade [NC]
RewriteRule \/socket\/.* ws://localhost:5002%{REQUEST_URI} [P]

ProxyPass /api/ http://localhost:5002/
ProxyPassReverse /api/ http://localhost:5002/

ProxyPass / http://localhost:5003/
ProxyPassReverse / http://localhost:5003/

启用必要的模块。

web socket前端组件如下：

 var websocketUrl = 'http://localhost/api' + '/socket';

暂时我手动设置上面的路径来快速测试

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>

<template>
    <div class="hidden"></div>
</template>

<style scoped>

</style>

<script>

module.exports = {
    name: 'web-socket-component',
    
    data : function() {
        return {
            stompClient: null
        }
    },
    
    props: {

    },

    methods: {

        connectToWebsocket: function() {

            var self = this;
            debugger;
            var websocketUrl = 'http://localhost/api' + '/socket';
            console.log(websocketUrl);
            var socket = new SockJS(websocketUrl);
            
            this.stompClient = Stomp.over(socket);
            this.stompClient.debug = null;
            
            this.stompClient.connect({}, function (frame) {
                
                console.log("WEB SOCKET");
                self.stompClient.subscribe('/topic/testSessions', function (message) {
                    
                    var socketBean = JSON.parse(message.body);
                    console.log("topic/testSessions");
                    EventBus.$emit('update-testSessions-page', socketBean);
                });

                self.stompClient.subscribe('/topic/testRequests', function (message) {
                    
                    var socketBean = JSON.parse(message.body);
                    EventBus.$emit('update-request-page', socketBean);
                });
                            
            }, function(message) {
                console.log(message);
            });
        }
        
    },
    
    computed: {
        
    },
    
    watch: {
        
    },
    
    mounted() {
        console.log("mounted");
        this.connectToWebsocket();
        
    },
    
    beforeMount(){
        
    },
};
</script>

当我打开浏览器通过 http://localhost 访问前端时，我看到了以下问题

网络端：

我的意见 RewriteRule 没有按预期工作。因为我尝试使用正确的 url 测试 Web 套接字并且它工作正常。

URL改为测试应用： var websocketUrl = 'http://localhost:5002' + '/socket';

你能告诉我哪个代理配置正确吗？

Answer 1

我更改了代理配置，现在它工作正常：

新代理配置：

RewriteEngine on
RewriteCond %{HTTP:UPGRADE} ^websocket$ [NC]
RewriteCond %{HTTP:CONNECTION} Upgrade [NC]
RewriteRule socket.* "ws://localhost:5002/socket" [P,L]

ProxyPass /api/ http://localhost:5002/
ProxyPassReverse /api/ http://localhost:5002/

ProxyPass / http://localhost:5003/
ProxyPassReverse / http://localhost:5003/

我从以下位置替换了 RewriteRule 正则表达式：

RewriteRule \/socket\/.* ws://localhost:5002%{REQUEST_URI} [P] -->

RewriteRule socket.* "ws://localhost:5002/socket" [P,L]

测试后我明白问题出在错误的正则表达式上

Web 套接字的 apache 代理配置问题

Issue with apache proxy configuration for Web socket

apache

mod-rewrite

url-rewriting

reverse-proxy

spring-websocket