I have a web app(react+.net8+azure sqlserver) docker-containerized successfully and run smoothly in local environment.

But CORS problem and 503 error happen after I upload my frontend and backend docker images to azure container and deploy them using azure web app service.

Currently I can access the deployed azure frontend page but when I try to fetch data from backend, the following error happens.

At same time, if I open my deployed azure backend site, following error displayed.

I have set CORS rule at my backend program.cs like:

app.UseCors(x => x
        .AllowAnyMethod()
        .AllowAnyHeader()
        .SetIsOriginAllowed(origin => true) 
        .AllowCredentials());

I added environment variable CORS at azure like:

http://localhost:80,http://localhost,http://frontend,http://"frontendwebappname".azurewebsites.net,https://"frontendwebappname".azurewebsites.net

Also, in API-CORS section, I added allowed origins same as what’s in variables CORS.
And I Enable Access-Control-Allow-Credentials.

I added all environment variables to azure as in my docker-compose.yml file.

  backend:
    container_name: backend
    image: backend
    build:
      context: ./Backend
      dockerfile: Dockerfile
    ports:
      - "80:80"
      - "443:443"
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - ASPNETCORE_HTTP_PORTS=80
      - ASPNETCORE_HTTPS_PORTS=443
      - ASPNETCORE_Kestrel__Certificates__Default__Password=xxx
      - ASPNETCORE_Kestrel__Certificates__Default__Path=/app/Certificates.p12
      - ConnectionStrings__ApplicationDbContext=Server=tcp:xxx.database.windows.net,1433;Initial Catalog=xxx;Persist Security Info=False;User ID=xxx;Password=xxx;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=60;
      - JwtSettings__SecretKey=xxx
      - JwtSettings__Issuer=xxx
      - JwtSettings__Audience=xxx
      - JwtSettings__ExpirationMinutes=xxx
    networks:
      - app-network

For my frontend settings, below are dockerfile and nginx.conf in my frontend folder.

FROM node:latest AS build
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . .

RUN npm run build

# Stage 2: Serve with NGINX
FROM nginx:latest

# Install dnsutils for Debian/Ubuntu
RUN apt-get update && apt-get install -y dnsutils

# Copy NGINX configuration
COPY nginx.conf /etc/nginx/nginx.conf

# Copy built React application
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
# Command to run NGINX
CMD ["nginx", "-g", "daemon off;"]

events {}

http {
    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name localhost;

        # Location block for serving frontend static files
        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # Proxy HTTP API requests
        location /api/http/ {
            rewrite ^/api/http/(.*)$ /$1 break;
            proxy_pass http://"backendwebappname".azurewebsites.net:80;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # Proxy HTTPS API requests
        location /api/https/ {
            rewrite ^/api/https/(.*)$ /$1 break;
            proxy_pass https://"backendwebappname".azurewebsites.net:443;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

    }
}

I also changed my VITE_API_URL as

VITE_API_URL = https://"backendwebappname".azurewebsites.net:443/api

so in docker-compose.yml file, my frontend settings are as below:

  frontend:
    container_name: frontend
    image: frontend
    build:
      context: ./Frontend
      dockerfile: Dockerfile
    ports:
      - "80:80"
    environment:
      - VITE_API_URL=https://"backendwebappname".azurewebsites.net:443/api
    depends_on:
      - backend
    networks:
      - app-network

now I have no idea how to do further debug or fix my code. chatgpt keeps telling me to check my cors setting in program.cs, but it should not be the root cause.
Could anyone give me any advice or hint? Thank you in advance!