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

【问题标题】：Issue with apache proxy configuration for Web socketWeb 套接字的 apache 代理配置问题
【发布时间】：2021-09-02 08:33:45
【问题描述】：

我对 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';

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

【问题讨论】：

标签： apache mod-rewrite url-rewriting reverse-proxy spring-websocket

【解决方案1】：

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

新的代理配置：

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/

我将 RewriteRule 正则表达式替换为：

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

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

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

【讨论】：