I'm trying to enable websockets on an AWS ElasticBeanstalk Tomcat 8.5 web app. I have a custom apache config (abbreviated):

RewriteEngine On
RewriteOptions Inherit

ProxyRequests Off
ProxyPreserveHost on

# send websocket requests to tomcat with the websocket protocol
RewriteCond ${HTTP:Connection}  "Upgrade" [NC]
RewriteCond ${HTTP:Upgrade}     "websocket" [NC]
RewriteRule /(.*) "ws://localhost:8080/$1" [P,L]

# send all other requests to tomcat
ProxyPass           /   http://localhost:8080/  retry=0
ProxyPassReverse    /   http://localhost:8080/

In the web app, when I try to connect the client websocket to the server endpoint, I get this error:

websocket.js:372 WebSocket connection to 'wss://example.com/ws/sales' failed: Error during WebSocket handshake: Unexpected response code: 404

I verified in Chrome's developer tools that the Connection and Upgrade headers sent in the request to the above endpoint are correct. (Obviously I'm really connecting to my website, not example.com)

When I change the apache config to use ProxyPass instead of RewriteRule, it works perfectly! I don't want to do it this way because I don't want to proxy to ws simply based on the URI. I want to check the headers like you're supposed to!

ProxyRequests Off
ProxyPreserveHost on

# send websocket requests to tomcat with the websocket protocol
ProxyPass           /ws/    ws://localhost:8080/ws/ retry=0
ProxyPassReverse    /ws/    ws://localhost:8080/ws/

# send all other requests to tomcat
ProxyPass           /   http://localhost:8080/  retry=0
ProxyPassReverse    /   http://localhost:8080/