Connecting a Websocket over a Caddy Proxy returns 405 Method Not Allowed with a POST call

AnonymousTRIAL

9 months ago

hey folks, Im newer to websocket integration so bear with me. I have a spring boot project connecting to a websocket using sockjs-client from my react front end and connecting to a STOMP entrypoint on the spring boot backend. Locally, this works great. However, I am getting a 405 method not allowed when connecting to out railway project. We are using Caddy Proxy to create a proxied URL so this may have something to do with it although Im not sure.

my react call is:

let sock = new SockJS('ws');
stompClient = over(sock);
stompClient.connect({} ,onConnected, onError);

which I get the error:

Request URL:
https://XXXXXXX.XXXXXXX.com/ws/021/bntqbx12/xhr_streaming?t=1721787651124
Request Method:
POST
Status Code:
405 Method Not Allowed
Remote Address:
34.86.119.124:443
Referrer Policy:
strict-origin-when-cross-origin

this is because railway only allows for GET and HEAD requests.

Allow:
GET, HEAD

Content-Length:
0
Date:
Wed, 24 Jul 2024 02:20:51 GMT
Server:
railway

on the back end:

@Configuration
@EnableWebSocketMessageBroker
@EnableWebSocket
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
stompEndpointRegistry.addEndpoint("/ws")
.setAllowedOriginPatterns("*")
.withSockJS();
}

we also have a package json proxy as well for our api requests if that is also important:

"proxy": "http://locahost:8081"

I can provide more info if you need it. Thanks in advance!

0 Replies

AnonymousTRIAL

9 months ago

e48131f7-096a-4b0a-8733-ecc43f93da7b


9 months ago

why the need for caddy to begin with?


9 months ago

also, please dont obfuscate things like this [xxxxxxx.xxxxxxx.com](xxxxxxx.xxxxxxx.com) its not helpful


AnonymousTRIAL

9 months ago

sorry, ya no worries --> https://assignments-dev.coderscampus.com/ws/021/bntqbx12/xhr_streaming?t=1721787651124
Request Method:
POST
Status Code:
405 Method Not Allowed
Remote Address:
34.86.119.124:443
Referrer Policy:
strict-origin-when-cross-origin


AnonymousTRIAL

9 months ago

I believe we were using caddy to generate a public domain


9 months ago

Railway generates a public domain for you with SSL


9 months ago

and for websocket connections wouldnt you send a GET request to wss://[assignments-dev.coderscampus.com/ws/021/bntqbx12/xhr_streaming?t=1721787651124](assignments-dev.coderscampus.com/ws/021/bntqbx12/xhr_streaming?t=1721787651124)


AnonymousTRIAL

9 months ago

hmmm, Im getting the error main.js:73 Uncaught SyntaxError: The URL's scheme must be either 'http:' or 'https:'. 'wss:' is not allowed.


9 months ago

why would wss not be allowed for a websocket endpoint


9 months ago

does the request need to be a post type? are you sending data in the body?


AnonymousTRIAL

9 months ago

hmm maybe its the library Im using? Im not exaclty sure, using sock-js-client


AnonymousTRIAL

9 months ago

nope, just trying to connect


9 months ago

either way, why caddy?


9 months ago

send the caddyfile so i can get an idea of what you are trying to do


AnonymousTRIAL

9 months ago

ya for sure, ```{ # global options
admin off # theres no need for the admin api in railway's environment
persistconfig off # storage isn't persistent anyway autohttps off # railway handles https for us, this would cause issues if left enabled
log { # runtime logs
format console # set runtime log format to console mode
}
servers { # server options
trustedproxies static privateranges # trust railway's proxy
}
}

:{$PORT} { # site block, listens on the $PORT environment variable, automatically assigned by railway
log { # access logs
format console # set access log format to console mode
}

# health check for railway
respond /health 200

# serve from the 'build' folder
root * build

# enable gzipping responses
encode gzip

# serve files from 'build'
file_server

# if path doesn't exist, redirect it to 'index.html' for client side routing
try_files {path} /index.html

}```


9 months ago

this just serves a frontend website


9 months ago

i know that, because i wrote that


AnonymousTRIAL

9 months ago

ooo nice! Thanks for writing it! We were just experimenting, my co worker and I and we came on some examples, so far its working as it should, but you think its overkill? Maybe messing with the domain?


9 months ago

no one has ever had issues with that caddyfile that i know of, using caddy to serve a frontend website is going to be by far the best way to do it on railway in my experience


9 months ago

so the issue is elsewhere


9 months ago

can you send a screenshot of your project canvas please


AnonymousTRIAL

9 months ago

yup for sure, is this it here?

1265509984414732300


9 months ago

okay and what is the caddy proxy for?


9 months ago

i wrote that too, but i see a lot of people using it when they actually dont need to be


AnonymousTRIAL

9 months ago

well, it looks like all we're doing here is connecting our front and back end under one domain


9 months ago

is that strictly needed?


AnonymousTRIAL

9 months ago

honestly cant say for sure, Id have to ask my co worker but is there an alternative you think instead? By removing the caddy proxy, you think it should clear the air?


AnonymousTRIAL

9 months ago

oop, holdup, I may have sent you the wrong caddy file --> ```# global options
{
admin off # theres no need for the admin api in railway's environment
persistconfig off # storage isn't persistent anyway autohttps off # railway handles https for us, this would cause issues if left enabled
# runtime logs
log {
format json # set runtime log format to json mode
}
# server options
servers {
trustedproxies static privateranges # trust railway's proxy
}
}

site block, listens on the $PORT environment variable, automatically assigned by railway

:{$PORT} {
# access logs
log {
format json # set access log format to json mode
}

reverse_proxy {$FRONTEND_HOST} # proxy all requests for /* to the frontend, configure this variable in the service settings

# the handle_path directive will strip /api/ from the path before proxying
# this is needed if your backend's api routes don't start with /api/
# change paths as needed
#handle_path /api/* {
    # this strips the /api/ prefix from the uri sent to the proxy address
#    reverse_proxy {$BACKEND_HOST} # proxy all requests for /api/* to the backend, configure this variable in the service settings
#}

# if your backend's api routes do start with /api/ then you wouldn't want to strip the path prefix
# if so, comment out the above handle_path block, and uncomment this reverse_proxy directive
# change paths as needed
reverse_proxy /api/* {$BACKEND_HOST} # configure this variable in the service settings

}```


9 months ago

i think there are some misunderstandings on your side as to why you need the proxy, i would eliminate it and go from there


9 months ago

have your frontend call the backend's domain directly, you of course will need to setup cors on your backend but thats a 5 minute tutorial and done


AnonymousTRIAL

9 months ago

okay ya for sure! I'll try this and get back to you. Thanks for your help!


9 months ago

no problem


9 months ago

oh and the reason you where getting 405 Method Not Allowed is because the path /ws/021/bntqbx12/xhr_streaming is a path in the frontend.
my proposed solution still stands though