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

Anonymous
TRIALOP

a year 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

Anonymous
TRIALOP

a year ago

e48131f7-096a-4b0a-8733-ecc43f93da7b


a year ago

why the need for caddy to begin with?


a year ago

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


Anonymous
TRIALOP

a year 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


Anonymous
TRIALOP

a year ago

I believe we were using caddy to generate a public domain


a year ago

Railway generates a public domain for you with SSL


a year 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)


Anonymous
TRIALOP

a year 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.


a year ago

why would wss not be allowed for a websocket endpoint


a year ago

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


Anonymous
TRIALOP

a year ago

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


Anonymous
TRIALOP

a year ago

nope, just trying to connect


a year ago

either way, why caddy?


a year ago

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


Anonymous
TRIALOP

a year 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

}```


a year ago

this just serves a frontend website


a year ago

i know that, because i wrote that


Anonymous
TRIALOP

a year 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?


a year 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


a year ago

so the issue is elsewhere


a year ago

can you send a screenshot of your project canvas please


Anonymous
TRIALOP

a year ago

yup for sure, is this it here?

1265509984414732300


a year ago

okay and what is the caddy proxy for?


a year ago

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


Anonymous
TRIALOP

a year ago

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


a year ago

is that strictly needed?


Anonymous
TRIALOP

a year 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?


Anonymous
TRIALOP

a year 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

}```


a year 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


a year 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


Anonymous
TRIALOP

a year ago

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


a year ago

no problem


a year 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


Loading...