React, Nginx, Docker and Spring Boot, GET Request work but POST/PUT/DELETE return HTTP 403 Postman work seamless

im trying to deploy my webapp on my domain, everything seems to work at the moment but the last few steps.

When i run my frontend, it does run the "GET" Requests successfully, but when i want to Edit, create or delete something, my backend returns a HTTP:403 forbidden.

i cant figure out why. Using Postman, all calls are successfull, just using my webapp returns in failed requests

Here is my nginx.conf:

`server {
    listen 80 default_server;
    server_name DOMAIN.com;

    location / {
        root /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /urs {
        rewrite /api/(.*) /$1  break;
        proxy_pass http://service:9001;
        proxy_pass_request_headers on;
        default_type  application/json;
    }
}`

here is my docker-compose file:

`version: '3.8'
services:
  frontend:
    stdin_open: true
    image: DOMAIN-client
    container_name: DOMAIN-client-c
    build:
      context: ./UniversalReservationSystemFrontend
      dockerfile: Dockerfile
    ports:
      - "80:80"
    environment:
      - NODE_ENV=production
    volumes:
      - /etc/nginx/certificates:/etc/nginx/certificates
  postgres:
    image: postgres
    container_name: psql-db-c
    environment:
      POSTGRES_DB: xx
      POSTGRES_USER: xx
      POSTGRES_PASSWORD: xx
    ports:
      - "5432:5432"
    volumes:
      - ./UniversalReservationSystem/src/main/resources/database/schema.sql:/docker-entrypoint-initdb.d/schema.sql:ro
  service:
    container_name: DOMAIN-system-c
    build:
      context: ./UniversalReservationSystem
      dockerfile: Dockerfile
    ports:
      - "9001:9001"
    environment:
      URS_DATABASE_URL: r2dbc:postgresql://postgres:5432/xx
      URS_DATABASE_USERNAME: xx
      URS_DATABASE_PASSWORD: xx
    depends_on:
      - postgres`

and my Dockerfile of my React app:

`# pull official base image
FROM node:20 AS builder

# Set the working directory to /client inside the container where the UI will be located at
# as if we would use "cd" in linux, if the folder does not exist, it will create the folder under the given path
WORKDIR /usr/src/client

# Copy app files to workdir inside the docker container
COPY package*.json ./

# Install dependencies (npm ci makes sure the exact versions in the lockfile gets installed)
RUN npm ci

# Copy all of the project files into the docker container
COPY . .

# RUN the build after installing dependencies and the "COPY" of the whole source code
RUN npm run build

##########################
# Use the official Nginx base image with Alpine Linux as the base image for the final production container.
# Nginx will be used to serve the static files generated by the React app.
FROM nginx:alpine

# Set the working directory inside the container to /usr/share/nginx/html, where Nginx serves the static content.
WORKDIR /usr/share/nginx/html

# Remove the default Nginx configuration file that comes with the image.
# We will replace it with our custom configuration file.
RUN rm /etc/nginx/conf.d/default.conf

# Copy the custom Nginx configuration file from the host (your machine) to the container.
# This configuration file will be used by Nginx to serve the React app and handle incoming requests.
COPY conf/nginx.conf /etc/nginx/conf.d/default.conf

# Remove all the existing files in the /usr/share/nginx/html directory to clear any default content that Nginx might have placed there.
RUN rm -rf ./*

# Copy the production build files of the React app (generated in the previous build stage) from the "builder" stage into the /usr/share/nginx/html directory.
# This makes the built React app available to Nginx for serving.
COPY --from=builder /usr/src/client/build .

# Set the default command that will run when the container starts.
# This command starts Nginx in the foreground to serve the React app and keeps the container running.
ENTRYPOINT ["nginx", "-g", "daemon off;"]
`

Some **Docker logs **

DOMAIN-client-c | 79.230.89.194 - - [26/Jul/2023:22:27:49 +0000] "POST /urs/tenant HTTP/1.1" 200 98 "-" "PostmanRuntime/7.32.3" "-" DOMAIN-system-c | 2023-07-26T22:28:02.176Z INFO 1 --- [ parallel-4] d.g.u.r.s.a.i.RequestIdHandler : API call: POST http://service:9001/urs/tenant DOMAIN-client-c | 192.168.32.1 - - [26/Jul/2023:22:28:02 +0000] "POST /urs/tenant HTTP/1.1" 403 0 "http://MY-DOMAIN.com/administration/tenant/create" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"

Here you can see that the first call using "Postman" does work using a "POST" api call. But using the same call over the webapp does not work.

Any help is appreciated.

I have tried several configs and videos, also understanding what happens behind and try to fix it. As well as check my CORS Settings in my backend, none of these ideas/suggestions succeed :(

Solution

The solution was that even thought "nginx" access via. "root user" (ofc. only for testing purposes), he did not have the rights to access the directory of my frontend.

adding:

# Test giving access to all users
RUN chmod -R a+rx .

to my Dockerfile solved the issue.

Small Edit: Ofc. i will add a User with the right access for the next time, running it on "root" was as said before, only for testing purposes