Issue with apache proxy configuration for Web socket

Question

Ia have an issue for apache proxy 2.4.48 configuration

My infrastructure replicated in my local PC is the followed:

• Backend listening on 5002 port

• Front-end listening on 5003 port

• apache proxy listening on 80 port with the followed configuration:

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/

with enabled the necessary modules.

Front-end component for web socket is the followed:

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

momently I set the path above maually to quick the tests

<%@ 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> 

When I open the browser to access to front-end via http://localhost I see the followed issue

network side:

My opinion RewriteRule does't work as expected. Because I try to test Web socket with the correct url and it works fine.

URL changed to test application: var websocketUrl = 'http://localhost:5002' + '/socket';

Could you tell me which is the proxy configuration right ?

Answer 1

I changed proxy configuration and now it's working fine:

New proxy configuration:

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

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

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

I replaced the RewriteRule regex from:

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

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

After the test I understood the issue was from wrong regex