#cors error

23 messages · Page 1 of 1 (latest)

opal yoke
#

Access to XMLHttpRequest at 'http://localhost/apiv1/accounts/me/' from origin 'http://localhost:1337' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

my backend is django.

CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "http://127.0.0.1:5173",
    "http://localhost:1337",
]
# CORS_ALLOW_ALL_ORIGINS = True
CSRF_TRUSTED_ORIGINS = [
    "http://localhost:5173",
    "http://127.0.0.1:5173",
    "http://localhost:3000",
    "http://localhost:1337",
]


CORS_ALLOW_HEADERS = [
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
]```

my app is dockerised and runs into these errors from there, locally backend/frontend
 connect fine
strange dawn
opal yoke
#

and the django is exposed at 8000

strange dawn
#

so django is receiving requests from port 80

opal yoke
# 
   build:
      context: .
      dockerfile: nginx/Dockerfile
   ports:
     - 1337:80
   depends_on:
     - django-web
   volumes:
     - static_volume:/app/staticfiles
   env_file:
     - ftscore/.env
# 
    server django-web:8000;
}

server {
    listen       80;
    # server_name  localhost;
    root   /usr/share/nginx/html;
    access_log /var/log/nginx/access.log;

    location / {
        try_files $uri /index.html;
    }

    location /apiv1/ {

        if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, X-CSRFToken' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        return 204;
    }
        proxy_pass http://fts_django/;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location /static/ {
        alias /app/staticfiles/;
    }

}```

this is my nginx.conf
#

what i did was remove the frontend from the services in the dockercompose and use the dockerfile in nginx instead to build the react container

FROM node:14.17.3 AS build

WORKDIR /frontend

COPY ftsfrontend/react-frontend/ .

RUN npm install
RUN npm run build

# Stage 2: Serve with Nginx
FROM nginx:alpine

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d

COPY --from=build /frontend/dist  /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]```
strange dawn
#

then your frontend should proxy the requests?

opal yoke
#

its a404 error for that route

#

yes it should

#

but thats not happening, i see now that the endpoint isnt even available

strange dawn
#

-> your frontend is set up incorrectly

opal yoke
#

how is that

strange dawn
opal yoke
#

i dont understand can you elaborate more

brisk oriole
#

I think the proxy pass needs to be inside be API location block

#

I’m not super familiar with nginx configs but like not rob said, if you wanna mount the Django API you need to proxy it through your nginx frontend on the correct mount point

opal yoke
brisk oriole