Calling backend docker container from frontend + client side vs server side rendering - spring-boot

Question

I'm currently working on a full stack application using Spring-boot (Kotlin), SvelteKit (run with Vite), and MongoDB, each with their own Docker container. My backend service is being forwarded to port 6868 on my localhost, and when I run my frontend service with "npm run dev" locally (which triggers this script): vite dev --host 0.0.0.0 --port 8080 and remove the service from my docker-compose.yml (see frontend-svelte service in docker-compose below), I am able to call my backend at localhost:6868 (see +page.js below). However, when I run my frontend inside of a docker container, the request to localhost:6868 fails. This sort of makes sense to me since localhost:6868 would refer to the inside of the docker container if the code was being sent from the server (docker container) as opposed to the browser. When I change localhost:6868 to spring-boot:8080 (the docker container) the initial request sent Server side does succeed (i.e. the console log below in /frontend-svelte/routes/+page.js does print out) however, there is still an error in the browser for the subsequent requests being sent from the client side. It seems to me that the issue is the discrepancy caused by requests sent from client-side vs server-side, so how can I resolve this issue? Thanks everyone for your help!
docker-compose.yml
version: "3.8"
services:
mongodb:
image: mongo:5.0.2
restart: unless-stopped
ports:
- 27017:27017
volumes:
- db:/data/db
spring-boot:
image: bracket_backend
build:
context: ./backend
dockerfile: Dev.Dockerfile
depends_on:
- mongodb
ports:
- 6868:8080
stdin_open: true
tty: true
volumes:
- ./backend/src:/app/src
env_file:
- ./.env
frontend-svelte:
image: bracket_frontend
build:
context: ./frontend-svelte
dockerfile: Dev.Dockerfile
ports:
- 1234:8080
stdin_open: true
tty: true
volumes:
- ./frontend-svelte/src:/app/src
depends_on:
- spring-boot
volumes:
db:
/backend/Dev.Dockerfile
FROM maven:3.8.6-openjdk-18-slim
WORKDIR /app
COPY ./.mvn ./mvn
COPY ./mvnw ./
COPY ./pomDev.xml ./
# Note that src is mounted as a volume to allow code update w/o restarting container
ENTRYPOINT mvn spring-boot:run -f pomDev.xml
/frontend-svelte/Dev.Dockerfile
FROM node:16-slim
WORKDIR /app
COPY package.json .
RUN npm install --legacy-peer-deps
COPY svelte.config.js .
COPY vite.config.js .
COPY jsconfig.json .
COPY playwright.config.js .
# Note that src is mounted so changes will occur.
ENTRYPOINT npm run dev
/frontend-svelte/routes/+page.js (this is where the request to the backend is made. This succeeds if not run from docker container)
import { getBaseUrl } from '$lib/utils.js';
/** #type {import('./$types').PageLoad} */
export async function load({ params }) {
console.log("test")
const response = await fetch(`http://localhost:6868/api/groups`); // THIS LINE MAKES THE REQUEST TO THE BACKEND
console.log("respoonse is: ");
console.log(response);
if (!response.ok) {
throw new Error(`Error! status: ${response.status}`);
}
return response.json()
}