SvelteKit - Cross-site POST form submissions are forbidden

Question

I am trying to build a simple web app with SvelteKit as frontend and Python (Starlite lib) as backend. I want to dockerize the app as well. When I use npm run dev to build the frontend app, everything works fine. But when I try to deploy it via node, I get an error message "Cross-site POST form submissions are forbidden" when the app tries to send a POST request with form data. I found a solution for this issue in this Stack Overflow post and added the following section to my docker-compose file:

environment:
  ORIGIN: http://localhost:3000 node build

However, after adding this section, none of the pages of the app are loading and I get an "Invalid body request" error message with a 400 status code.

docker-compose.yml

version: "3.4"

services:

  frontend:
    container_name: frontend_container_name
    build:
      context: ./app/frontend
      dockerfile: Dockerfile
    ports:
      - 5173:5173
      - 4173:4173
      - 3000:3000
    volumes:
      - ./app/frontend/src:/usr/frontend/app/src
    environment:
      ORIGIN: http://localhost:3000 node build
      NODE_ENV: development
      
  
  backend:
    container_name: backend_container_name
    image: some_image_name
    build: ./app/backend
    ports:
      - 5101:5101
    env_file:
      - ./app/env/master.env
    depends_on: [db, frontend]
    volumes:
      - ./app/backend/config.yml:/app/config.yml
  
  db:
    image: postgres:12
    container_name: db_container_name
    env_file:
      - ./app/env/master.env
    ports:
      - 5432:5432

Frontend Dockerfile

FROM node:19 as build

RUN mkdir /usr/frontend
WORKDIR /usr/frontend
RUN mkdir /app
WORKDIR /usr/frontend/app

COPY . ./
RUN npm install
RUN npm run build

#CMD ["npm","run", "preview","--", "--host", "0.0.0.0"]
#CMD ["npm","run", "dev","--", "--host", "0.0.0.0"]
CMD ["node", "build"]

+page.server.ts in /routes/sign-in

import { fail, redirect } from '@sveltejs/kit';
import { dev } from '$app/environment';
const getUserURL = "http://backend:5101/get_user_by_email";
const updateSessionURL = "http://backend:5101/update_session";

export const actions = {
    default: async ({ request, cookies }) => {
        const form = await request.formData();
        const name = form.get('name');
        const password = form.get('password');
        let session_id = '';

        if (name === '' || password === '') {
            throw redirect(307, '/');
        }
        const res = await fetch(`${getUserURL}?name=${name}`);
        const user = await res.json();
        if(!user.body || user.body.password !== password) {
            return fail(400, { name, incorrect: true });
        }
        
        if(!user.body.session_id) {
            const reqBody = {
                name: name,
                password: password
            }
            const res = await fetch(`${updateSessionURL}`, {
                method: 'POST',
                body: JSON.stringify(reqBody)
            });
            const { resp } = await res.json();
            session_id = resp.body.session_id
        }
        else {
            session_id = user.body.session_id
        }
 
        cookies.set('session_id', session_id, {
            path: '/',
            httpOnly: true,
            sameSite: 'strict',
            secure: !dev,
            maxAge: 60 * 60 * 24 * 7 // one week
        });
        throw redirect(303, "/")
    }
};

Imgur

P.S. I'm using an adapter-node

P.P.S I'm new to JS/TS, so I apologize in advance if my code smells

What am I doing wrong?

Answer 1

Now found this GitHub issue and change environment section in docker-compose.yml file to this:

environment:
  - ORIGIN=http://localhost:3000
  - NODE_ENV=development

And it works!