CODEWITHSUNDEEP
node.jsapivue.jsnginxaxios
MarekCze
MarekCze

Reputation: 15

Vue will not communicate with Express through NGINX

I have set up a Vue frontend and Express backend on a DigitalOcean droplet and I'm using NGINX to get them to talk through an API. The frontend works, but when I try to access an API route I get a "CONNECTION_REFUSED" error in the console. The error points to axios in webpack. I think I have NGINX configured properly (see code below) and when I access the API route with curl it works.

On the frontend I get axios to send a request to the backend which then returns json data.

Question 1: If NGINX is now handling the communication between Vue and Express, am I correct in thinking that I can get rid of axios, as when an API request is made NGINX decides what to do with it (sends it to the backend and then sends the respose to the client) which effectively bypasses axios communicating with Express? Here's the axios code (api.js simply imports axios and sets the base url):

import api from '@/services/api'

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

Question 2: I am using https on the frontend but communicating with backend through http. On Firefox I am getting "CORS request did not succeed" - I vaguely remember reading somewhere that https to http could cause problems with CORS. Could this be the issue? If so, can I use the same SSL cert for the backend and frontend? Do I have to change anything in the NGINX config?

I've been at this for days and I just can't figure it out for the life of me. Any help would be greatly appreciated.

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;

    }

}

Upvotes: 0

Views: 427

Answers (1)

eay
eay

Reputation: 186

error probably because of "cors" but have you tried with "postman"? this links can help you https://www.npmjs.com/package/cors#usage
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Upvotes: 1

Related Questions