405 error calling server function from csr app

[psobolik]

I want to call a server-side function from a Letpos csr app. Here's a simplified example of what I tried.

#[server]
pub async fn test() -> Result<String, ServerFnError> {
    Ok(String::from("this is a test"))
}
#[component]
pub fn App() -> impl IntoView {
    let async_data = Resource::new(
        move || (),
        |_| test()
    );
    view! {
        <p>-{async_data}-</p>
    }
}

This isn't working because the server is rejecting the POST request.

HTTP/1.1 405 Method Not Allowed
allow: GET,HEAD
content-length: 0
date: Thu, 03 Jul 2025 13:26:37 GMT

Is there something I should be doing to allow POSTs?

For what it's worth, here's the request.

POST /api/test11253213226925694610 HTTP/1.1
Host: 127.0.0.1:3000
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0
Accept: application/x-www-form-urlencoded
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br, zstd
Referer: http://127.0.0.1:3000/
content-type: application/json
Content-Length: 0
Origin: http://127.0.0.1:3000
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
Priority: u=4
Pragma: no-cache
Cache-Control: no-cache

[gbj]

I'm not sure I understand the context: How are you running this application? Are you using trunk for a CSR app or are you running a Rust server using the leptos_axum or leptos_actix integration? If you are using trunk it is just serving static HTML/JS/WASM files and there is no Rust server running to run a server function on. If you're using one of the starter template but adapted for CSR (like the todo_app_sqlite_csr example in this repo) then it's a different question entirely.

[psobolik]

I guess I misread this:

#[server]

Declares that a function is a [server function](https://docs.rs/server_fn/latest/server_fn/index.html). This means that its body will only run on the server, i.e., when the ssr feature on this crate is enabled.

If you call a server function from the client (i.e., when the csr or hydrate features are enabled), it will instead make a network request to the server.

I thought it was saying that you could use a server function in a csr app, but I guess you're saying that it must be an ssr app with csr functionality.

[gbj]

I think this is where the way we (we = the web-dev community) use terms like "SSR" pretty loosely becomes unhelpful. Thinking through/explaining it in more detail might be helpful:

"csr" = client-side rendering (of DOM elements in the browser)
"ssr" = server-side rendering (of HTML that is then sent to the browser)

So you can use "csr" by having a static file server in any language serve JS/WASM files that do all the rendering in the browser. But you can also use "csr" by having a Rust server serve JS/WASM files that do all the rendering in the browser. And if you're doing the latter you can also use server functions because you're running a Rust server. But if you're not using a Rust server to serve the files, then there's no server that can run the Rust code you're writing in the server function on the server, if that makes sense.

[psobolik]

Thanks for the explanation. I'm still at the point where most of Leptos just seems like magic, so I was ready to believe that the #[server] attribute miraculously created a server, which it obviously doesn't.
It's kind of an AB problem, because what I really want is to provide the app with the URL of a separate API without needing to change the code for development and production. My first thought was to put it into an environment variable, which led me down this path. I'll have to devise some other way to configure it.

[gbj]

If the environment variable is available at compile time you can compile it into the WASM binary using the env!() macro.

[psobolik]

That's the ticket! I added the following build script to set the environment variable according to the build profile and now I can read the value in code with env!("API_URL").

fn main() {
    match std::env::var("PROFILE") {
        Ok(profile) => match profile.as_str() {
            "debug" => println!("cargo::rustc-env=API_URL=http://localhost:5050/api/"),
            _ => println!("cargo::rustc-env=API_URL=http://localhost/api/"),
        }
        _ => panic!("Environment variable PROFILE not set"),
    }
}