0

Un saludo para todos, actualmente estoy trabajando en una API con Django Rest Framework y un frontend con React (create react app) y se me ha presentado un inconveniente con la política de CORS.

Instalé el paquete django-cors-headers==3.11.0

Y lo configuré de la siguiente manera

settings.py

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOWED_ORIGINS = [
    "https://dev-ct.portubien.co/",
    "http://cerotramites.portubien.co:88/"
]

CORS_ORIGIN_WHITELIST = CORS_ALLOWED_ORIGINS

El primero "https://dev-ct.portubien.co/" corresponde al entorno de pruebas de desarrollo y allí quedó solucionado.

Sin embargo en el segundo "http://cerotramites.portubien.co:88/" no sucedió lo mismo, el error de CORS persiste.

Tanto backend como frontend tienen su respectivo entorno de pruebas y de producción

Pruebas

https://dev-ct.portubien.co/ -> https://dev-rcv.portubien.co/

Producción

http://cerotramites.portubien.co:88/ -> http://app.portubien.co:88/

Consola Dev Tools introducir la descripción de la imagen aquí

Network Dev Tools introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Agradezco a quien me pueda informar que es lo que estoy haciendo mal, si me hace falta configurar algo mas o cualquier otra situación que me pueda ayudar a solventar la situación

Nota: El servidor de producción tiene implementado APACHE en el puerto 80 debido a que ya existen proyectos implementados allí. En mi caso uso UWSGI como servidor web para correr Django y a Nginx lo tengo como servidor proxy, por tal motivo Nginx esta habilitado por el puerto 88 en el entorno de producción.

8
  • Cual es el error exacto que te aparece?
    – yorch
    Commented el 2 mar. 2022 a las 23:45
  • Actualicé la pregunta con una captura del el error que estoy obteniendo en la consola del navegador.
    – Ceragos
    Commented el 3 mar. 2022 a las 19:36
  • Ahora abre WebDev Tools, anda a network tab, y revisa los response headers del request que carga la pagina, para ver si el header de CORS esta correcto, puedes postear el screenshot tambien
    – yorch
    Commented el 3 mar. 2022 a las 21:13
  • Nueva actualización con las capturas de networks
    – Ceragos
    Commented el 6 mar. 2022 a las 16:41
  • Lo que necesitas ver son los Response Headers del request a http://cerotramites.portubien.co:88/, no a /api/token, dado que el request principal desde donde se cargan los otros recursos es el primero que menciono
    – yorch
    Commented el 6 mar. 2022 a las 16:51

1 respuesta 1

0

Como puedes ver en el último screenshot que tienes en tu post, el request a /login no esta devolviendo ningún CORS header ya que lo esta sirviendo Nginx.

Lo que tienes que hacer es agregar uno o más CORS headers en tu configuración de Nginx, por ejemplo:

location / {
    add_header 'Access-Control-Allow-Origin' 'app.portubien.co:88';
}

Como referencia, si necesitas una configuración mas detallada, puedes usar esta como referencia:

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
     }
}

Fuente: https://enable-cors.org/server_nginx.html

2
  • Hola, ya hice la implementación y continua igual.
    – Ceragos
    Commented el 7 mar. 2022 a las 20:27
  • Que response headers aparecen en el request ahora?
    – yorch
    Commented el 10 mar. 2022 a las 1:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.