Angular 7 Universal: невозможно загрузить простой Http-запрос на сервер Express (SSR) - PullRequest
Новая
       12

Angular 7 Universal: невозможно загрузить простой Http-запрос на сервер Express (SSR)

0 голосов
/ 19 февраля 2019

Мое приложение на данный момент является простой попыткой, прежде чем идти дальше: я собираюсь развернуть угловой 7 интерфейс , работающий с сервером узлов Express в SSR (SEOоптимизация и доступ к WooCommerceAPI). Nginx сервер приходит сюда, чтобы связать внутреннюю часть Wordpress и обеспечить прокси с моим универсальным приложением.

На локальном уровне мои простые тесты в SSR работают хорошо.Мое угловое приложение отправляет http-запрос на мой экспресс-сервер, этот использует woocommerceAPI для получения некоторых продуктов, и я возвращаю Json взамен.( windows 10, XAMPP ).

На моем VPS ( debian 9, Nginx ) по некоторым причинам мое угловое приложение не может достичь Экспресс сервер.Я получаю сообщение об ошибке CONNECTION_REFUSED (сообщение: «Http-ошибка ответа (неизвестный URL-адрес): 0 неизвестная ошибка»).Журнал не предоставляет больше клиентов.Я перепробовал много вещей безрезультатно.Я включил CORS как в nginx, так и в Express.Я занимаюсь этим несколько дней, любая идея может мне сильно помочь!

Мой угловой SSR работает на порту 9000. Вот некоторые части кода:

Редактировать> РЕШЕНО!

Хорошо, здесь нужно изменить две вещи. Сначала , в угловом приложении вызовите экспресс: измените http://localhost:9000/api/req на http://your -public-ip-адрес: 9000 / api / req .

Второй : так как моя папка WordPress (и URL для доступа) находится в подкаталоге, расположение nginx необходимо настроить с помощью следующих строк: 

location /wp {
        root /var/www;
        index index.php;
        allow 127.0.0.1;
        ...
        try_files $uri $uri/ /wp/index.php$is_args$args;
        ...
        location ~ \.php$ {
           ... everything is okay here ...
               just be sure to configure your fpm port
        }
}

Angular> экспресс-вызов 

constructor( private http: HttpClient ) { }

getAllProducts() {
  // THIS LINE NEEDS TO BE CHANGED !!!
  let response = this.http.get('http://localhost:9000/api/req')
      .subscribe(
          data => console.log('SUCCESS ', data),
          error => console.log('OOPS ', error)
  );
}

Express> woocommerce Call 

const cors = require("cors");
app.use(cors());

app.get('/api/req', (req, res) => {
  console.log("SERVER : Begin to get all Posts");
  WooCommerce.getAsync('products').then(function(result) {
    res.send(JSON.stringify(result));
  });
});

// Serving on 9000
app.listen(PORT,() => {
  console.log(`serving the site for you at http://localhost:${PORT}!`);
});

Файл конфигурации Nginx 

server {
        server_name xxxxxx;
        listen 80;

     #Proxy to angular App Universal
     location / {
        include cors; #call to conf file - enabling CORS
        allow 127.0.0.1;
        root /usr/share/nginx/html;
        proxy_pass http://127.0.0.1:9000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connecion 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    #Link to wordpress / woocommerce admin interface

    #CERTAINS LINES NEED TO BE CHANGED / ADDED !!!

    location /wp {
        include cors;
        root /var/www/;
        index index.php;
        allow 127.0.0.1;

        access_log /var/log/nginx/blog.access.log;
        error_log /var/log/nginx/blog.error.log;

        add_header 'Access-Control-Allow-Origin' 'http://localhost' always;

        location ~ \.php$ {
            try_files $uri =404;
            fastcgi_index index.php;
            fastcgi_pass 127.0.0.1:7000;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include /etc/nginx/fastcgi_params;
        }
    }
}

Спасибо, что читаете меня!

...