Configuré una interfaz Vue y un backend Express en un droplet de DigitalOcean y estoy usando NGINX para que hablen a través de una API. La interfaz funciona, pero cuando intento acceder a una ruta API, aparece el error "CONEXIÓN_REFUSADA" en la consola. El error apunta a axios en webpack. Creo que tengo NGINX configurado correctamente (vea el código a continuación) y cuando accedo a la ruta API con curl, funciona.

En la interfaz, obtengo axios para enviar una solicitud al backend que luego devuelve datos json.

Pregunta 1: Si NGINX ahora está manejando la comunicación entre Vue y Express, ¿tengo razón al pensar que puedo deshacerme de axios, ya que cuando se realiza una solicitud de API, NGINX decide qué hacer con ella (la envía al backend y luego envía la respuesta al cliente) que efectivamente evita que axios se comunique con Express? Aquí está el código axios (api.js simplemente importa axios y establece la URL base):

 import api from '@/services/api' export default { fetchProjects () { return api().get('projects') }, fetchProjectById (id) { return api().get(`projects/${id}`) }

Pregunta 2: estoy usando https en el frontend pero me comunico con el backend a través de http. En Firefox recibo "La solicitud de CORS no tuvo éxito". Recuerdo vagamente haber leído en alguna parte que https a http podría causar problemas con CORS. ¿Podría ser éste el problema? Si es así, ¿puedo usar el mismo certificado SSL para el backend y el frontend? ¿Tengo que cambiar algo en la configuración de NGINX?

He estado en esto durante días y simplemente no puedo resolverlo por mi vida. Cualquier ayuda sería muy apreciada.

 upstream backend { server 127.0.0.1:3000; keepalive 8; } server { listen 443 ssl default_server; listen [::]:443 ssl default_server; root /var/www/html/PersonalWebsite/frontend/dist; index index.html index.htm index.nginx-debian.html; server_name website.com www.website.com; ssl_certificate <link-to-cert>; ssl_certificate_key <link-to-key>; include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot # Redirect to https if ($scheme != "https") { return 301 https://$host$request_uri; } # managed by Certbot location / { add_header 'Access-Control-Allow-Origin' 'http://localhost:8080' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always; add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' always; try_files $uri $uri/ =404; } location /api/ { add_header 'Access-Control-Allow-Origin' 'http://localhost:3000' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always; add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' always; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://backend; }

}