apache - Issue with apache proxy configuration for Web socket
问题描述
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 ?
解决方案
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