http-запрос не работает при развертывании приложения

Question

Я кодировал приложение, которое включает http-запрос, jquery и некоторые другие материалы. Когда я запускаю это приложение через ng serve, оно работает, но когда я использую его сейчас, оно не работает. Я должен упомянуть, что приложение включает в себя jquery, jquery-ui, font-awesome и bootstrap.

Я использовал эту команду для сборки приложения: ng build --target=production --base-href '/'

И это мой главный компонент:

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';

export interface randomResponse {
  author: string;
  id: number;
  quote: string;
  permalink: string;
}

var colors = [
  '#8b0000', '#83ffa4', '#6897bb', '#0099cc', '#3399ff',
  '#ff7f50', '#f0bff4', '#ffab7f', '#fbcf9c', '#f4bfde',
  '#f4d5bf', '#52f8ab', '#f091e7', '#8adcbb', '#16ba78'
];

@Component({
  selector: 'app-random-quote-machine',
  templateUrl: './random-quote-machine.component.html',
  styleUrls: ['./random-quote-machine.component.css']
})
export class RandomQuoteMachineComponent implements OnInit {
  data: randomResponse;
  loading: boolean;

  twitter_link: string;

  constructor(private http: Http) { }

  ngOnInit() {
    this.makeRequest();
  }

  makeRequest(): void {
    this.loading = true;
    this.http.request('http://quotes.stormconsultancy.co.uk/random.json')
    .subscribe((res: Response) => {
      this.data = res.json();
      this.loading = false;

      this.twitter_link = `https://twitter.com/intent/tweet?hashtags=quotes&related=encofreecodecamp&text=${encodeURI(this.data.quote + ' - ' + this.data.author)}`;
      var color = Math.floor(Math.random() * colors.length);
      $('html body').animate({
        backgroundColor: colors[color]
      }, 1000);
      $('.buttons a').animate({
        backgroundColor: colors[color]
      }, 1000);
      $('.buttons button').animate({
        backgroundColor: colors[color]
      }, 1000);
    });
  }
}

Как видите, данные не загружаются: https://dist -lofgslojpd.now.sh

URL проекта GitHub: https://github.com/mbarra1945/Random-Quote-Machine

Answer 1

Глядя на вашу консоль, вы испытываете проблемы, поскольку ваши URL-адреса для внешних ресурсов CSS и JS используют http://, однако ваш сайт работает на https:// (что является проблемой безопасности).

Это можно исправить, изменив абсолютный URL-адрес для внешних ресурсов, чтобы удалить протокольную часть URL-адреса (т. Е. Если http://..., вместо этого используйте //... - удаляя http:). Это приведет к тому, что браузер загрузит ресурс через http://, если страница загружена в http://, в противном случае он загрузит ресурсы через https://, если страница будет загружена в https://.