Cookies http only dont work in browser

[dauid64]

I created a API with axum, where have endpoint for login, where set auth-token and configurated it this way:

fn set_token_cookie(cookies: &Cookies, username: &str, id: Uuid) -> Result<()> {
    let token = crypt::jwt::encode_jwt(username, id)?;

    let mut cookie = Cookie::new(AUTH_TOKEN, token.to_string());
    cookie.set_http_only(true);
    cookie.set_path("/");

    cookies.add(cookie);

    Ok(())
}

When i do request with postman, work correctly:

but when i use fetch in my frontend on browser dont work:

const response = await fetch(url, {
            ...options,
            headers,
            body: JSON.stringify(options.body),
            credentials: "include",
        })

[mbrubeck]

Is this a cross-origin or same-origin request?

How are you testing whether the cookie was sent in the browser? Note that HttpOnly cookies are not readable from JavaScript code.

[dauid64]

Yes, I use http://localhost and ports is 3001 for API and 3000 frontend, but i use nginx for bring everyone together on port 80, this is configuration the nginx:

server {
    listen 80;

    location / {
        proxy_pass http://host.docker.internal:3001; # Svelte app
        proxy_http_version 1.1;
        proxy_set_header Host host.docker.internal:3001; # Define o cabeçalho Host necessário para o sveltekit
        proxy_set_header Origin http://host.docker.internal:3001; # Define o cabeçalho Origin necessário para o sveltekit
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
        client_max_body_size 2M;
    }

    location /api/ {
        proxy_pass http://host.docker.internal:3000; # Rust API
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        client_max_body_size 2M;
    }
}

I testing cookie trying access private endpoint in my API and seeing console browser:

how can you see, dont set cookie.

[mbrubeck]

Hmm. I notice that your postman screenshot shows a request to http://localhost:3000/api/login while your devtools screenshot shows a request to http://localhost:8080/login. Does postman have the same behavior if you change it to use the same URL? Are any other request headers different?

[dauid64]

The request to http://localhost:8080/login is in frontend with sveltekit and the backend of sveltekit do request for API, how next code (code with typescript):

export const actions = {
    default: async (event: RequestEvent) => {
        const { request, locals, cookies } = event
        const tutorIAAPI = locals.tutorIAAPI as TutorIAAPI

        const form = await superValidate(request, zod(authSchema))

        if (!form.valid) {
            return fail(400, { form })
        }

        const responseData = await tutorIAAPI.fetchWrapper(
            'login',
            {
                method: 'POST',
                body: form.data
            }
        )

        if (responseData.error) {
            setFlash({ type: 'error', message: 'Não foi possível realizar o login.'}, cookies)
            return fail(400, { form })
        }

        redirect("/dashboard", { type: 'success', message: 'Login realizado com sucesso!'}, cookies)
    }
}

the fetch request to http://localhost:8080/api/login

[dauid64]

Sorry i try print log of response fetch, and i can see this

console.log(response.headers)

but when i try fetch again of another endpoint private, backend rust dont can get cookie

[jendrikw]

You cannot use the Cookie header when making requests using fetch.
It will just send the usual document.cookie. Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms | MDN