http request not working at deploying app

Question

I was coding an application who includes an http request, jquery and some stuffs. When I run this app through ng serve it works but when I deploy it using now it doesn't work. I have to mention that the application includes jquery, jquery-ui, font-awesome and bootstrap.

I used this command to build the application: ng build --target=production --base-href '/'

And this is my main component:

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);
    });
  }
}

As you see, it's not loading data: https://dist-lofgslojpd.now.sh

URL of GitHub project: https://github.com/mbarra1945/Random-Quote-Machine

I get `polyfills.b6b2cd0d4c472ac3ac12.bundle.js:1 Mixed Content: The page at 'https://dist-lofgslojpd.now.sh/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://quotes.stormconsultancy.co.uk/random.json'. This request has been blocked; the content must be served over HTTPS.`. You have to get the json from a HTTPS-resource — Phil, May 02 '18 at 16:38
Also you shouldn't use jQuery with Angular: https://stackoverflow.com/a/50087858/4125622 — Phil, May 02 '18 at 16:39

score 0 · Answer 1 · answered May 02 '18 at 16:40

Looking at your console, you are having problems because your URLs for external CSS and JS resources are using http://, however your site is running on https:// (which is a security issue).

You can fix this by changing your absolute URL for external resources to remove the protocol portion of the URL (i.e. if http://..., use //... instead - removing the http:). Doing this will cause the browser to load the resource over http:// if the page is loaded on http://, otherwise it will load the resources over https:// if the page is loaded on https://.

http request not working at deploying app

1 Answers1