Vue не будет связываться с Express через NGINX - PullRequest
Новая
       4

Vue не будет связываться с Express через NGINX

0 голосов
/ 19 апреля 2020

Я установил Vue внешний интерфейс и Express внутренний интерфейс для капли DigitalOcean, и я использую NGINX, чтобы заставить их общаться через API. Интерфейс работает, но когда я пытаюсь получить доступ к маршруту API, я получаю ошибку «CONNECTION_REFUSED» в консоли. Ошибка указывает на ax ios в веб-пакете. Я думаю, что NGINX настроен правильно (см. Код ниже), и когда я получаю доступ к маршруту API с помощью curl, он работает.

На внешнем интерфейсе я получаю топор ios, чтобы отправить запрос на сервер, который затем возвращает json данные.

Вопрос 1: Если NGINX теперь обрабатывает связь между Vue и Express, правильно ли я считаю, что могу избавиться от топора ios, так как когда запрос API NGINX решает, что с ним делать (отправляет его бэкэнду, а затем отправляет respose клиенту), который эффективно обходит топор ios, взаимодействующий с Express? Вот код ax ios (api. js просто импортирует ax ios и устанавливает базовый URL): 

import api from '@/services/api'

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

Вопрос 2: я использую https на внешнем интерфейсе, но общаюсь с бэкэндом через HTTP. На Firefox я получаю «запрос CORS не выполнен» - я смутно помню, что где-то читал, что https to http может вызвать проблемы с CORS. Может ли это быть проблемой? Если да, могу ли я использовать один и тот же сертификат SSL для внутреннего и внешнего интерфейса? Нужно ли что-то менять в конфигурации NGINX?

Я занимался этим уже несколько дней, и я просто не могу понять это ради своей жизни. Любая помощь будет принята с благодарностью. 

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;

    }

}

1 Ответ

1 голос
/ 19 апреля 2020

ошибка, вероятно, из-за "cors", но вы пробовали с "почтальоном"? эта ссылка может помочь вам https://www.npmjs.com/package/cors#usage
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

...