for a couple of days I’m trying to resolve Cross-Origin Request Blocked problem within my docker container.

this is my Fastapi code:

import os
from contextlib import asynccontextmanager

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware

from api.background.DataUpdate.dbDataUpdater15m import dbDataUpdate
from api.background.DataUpdate.liveData5s import dataLive
from api.background.dataSched import PeriodicTask
from api.routes.calendarDataRoute import calendar
from api.routes.liveData import live
from api.routes.plotDataRoute import PlotData
from network.pcIP.IP import get_ip_address
from src.dbManage.dbCreateTables import createDBtables

task1 = PeriodicTask(5, dataLive)
task2 = PeriodicTask(900, dbDataUpdate)

#ip = str(get_ip_address())

ip = str("frontend")
#ip = os.getenv("FRONTEND_HOST", "localhost")

@asynccontextmanager
async def lifespan(app: FastAPI):
    # Load the ML model
    createDBtables()
    task1.start()
    task2.start()
    yield
    # Clean up the ML models and release the resources
    task1.stop()
    task2.stop()


app = FastAPI(lifespan=lifespan)

origins = [
    "http://localhost",
    "http://localhost:8000",
    "http://localhost:3240",
    "http://localhost:63342",
    "http://192.168.95.102:63342",
    "http://192.168.95.102:8000",
    "http://192.168.65.1",
    "http://192.168.65.1:36886",
    "http://127.0.0.1:8080",
    "http://127.0.0.1:8000",
    f"http://{ip}:3240",
    f"http://{ip}:8080",
    f"http://{ip}:8000",
    f"http://{ip}",
    f"http://backend:8000",
    f"http://backend:8080",
    f"http://backend:3240",
    f"http://backend:80",
]


#origins = ["*"]  # Allow all CORS requests
print(ip)
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["GET", "POST"],
    allow_headers=["*"],
)

app.include_router(PlotData)
app.include_router(calendar)
app.include_router(live)

if __name__ == '__main__':
    import uvicorn

    uvicorn.run(app, host="backend", port=8000)

this is my javaScript script:

const bURL = "backend";

export const links = {
  linePlot: `http://${bURL}:8000/`,
  calendar: `http://${bURL}:8000/calendar`,
  linePlotButton: `http://${bURL}:8000/button`,
};

const dayControlScript = document.getElementById('dayControlScript');
dayControlScript.src = '../src/scripts/linePlot/controls/DayControl.js';

// Load dateControl.js
const dateControlScript = document.getElementById('dateControlScript');
dateControlScript.src = '../src/scripts/calendar/controls/dateControl.js';

I know that it’s a bit weird, but i was debugging code, and i just didn’t place all other commented code.

this is my docker yaml:

version: '3.8'

services:
  backend:
    build: ./backend
    container_name: backend
    env_file: .env
    ports:
      - "8000:8000"
    depends_on:
      - db
    networks:
      - campione-network
    volumes:
      - ./backend:/campionePlot

  frontend:
    build: ./frontend
    container_name: frontend
    ports:
      - "3240:80"
    networks:
      - campione-network
    environment:
      BACKEND_URL: "http://backend:8000"
    volumes:
      - ./frontend:/usr/share/nginx/html

  db:
    image: postgres:latest
    container_name: db
    env_file: .env
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - campione-network

volumes:
  postgres_data:

networks:
  campione-network:
    driver: bridge

and this is my nginx conf (main part):

server {
    listen 3240;
    server_name frontend;

    root /usr/share/nginx/html;
    index Public/index.html;

    # Default location for serving index.html
    location = / {
        try_files /Public/index.html =404;
        add_header Cache-Control "public, max-age=31536000";
    }

    # Location for serving 404 page and its assets
    location ^~ /404/ {
        root /usr/share/nginx/html/Public/;

        # Serve 404.html
        location = /404/404.html {
            try_files $uri =404;
            add_header Cache-Control "public, max-age=31536000";
        }

        # Serve assets under /404/assets/
        location ^~ /404/assets/ {
            try_files $uri =404;
            add_header Cache-Control "public, max-age=31536000";
        }
    }

    # Location for serving assets under /assets/css/
    location ^~ /assets/ {
        root /usr/share/nginx/html/Public/;
        try_files $uri =404;
        add_header Cache-Control "public, max-age=31536000";
    }

    # Location for serving assets under /src/
    location ^~ /src/ {
        root /usr/share/nginx/html;
        try_files $uri $uri/ =404;
    }
}

inside a docker file for nginx i also added this

EXPOSE 80

I literally, i think tried everything.

What i tried.

The only time it worked when i just placed everything to 0.0.0.0 (instead of backend and frontend names)

I tried to run this commands

docker exec frontend curl http://backend:8000
docker exec backend curl http://backend:8000

docker exec frontend curl http://fronend
docker exec backend curl http://fronend

``` they worked

i tried to disable cors in fastapi (allowing everything) by doing this -> 

origins = [*]

nothing

I tried to run it with and without hostname in nginx.conf 

On my pc everything works. Even when i place my wifi ip internal address (to have the connection from phone too) i don't have any problems with Cors.

I don't know what should i do. I don't want to turn it off from browser, because i want to go online with the site, and turn this control off in each browser like don't work at all. Any suggestions? Thank you for every help!