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

GitHub项目的网址：https://github.com/mbarra1945/Random-Quote-Machine

Answer 1

查看您的控制台，您遇到了问题，因为外部CSS和JS资源的URL使用spring.jackson.*，但您的网站正在http://上运行（这是一个安全问题）。

您可以通过更改外部资源的绝对网址来删除网址的协议部分（例如https://，使用http://... - 删除//...）来解决此问题。如果页面加载到http:，则执行此操作将导致浏览器加载资源http://，否则如果页面加载http://，它将加载https://上的资源}。

http请求无法部署应用程序

1 个答案: