I am currently utilizing a service that calls a URL where an image file is located. However, when the URL is called, an error appears in the console stating: Failed to load "my file url": No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. It seems that the issue arises only when trying to fetch this image file URL. I have attempted to measure the time before and after calling the URL, but this error persists. While installing a CORS extension provides a temporary fix, it is not an ideal solution. Can anyone assist me in resolving this error? I seem to be at a standstill with it. Here is the component code snippet:

import { Component } from '@angular/core';
            import { SpeedService } from './speed.service';
            import { Observable } from 'rxjs/Observable';
            import {Subject} from 'rxjs/Rx';
            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.css']
            })
            export class AppComponent {
              title = 'app';
              speed:any;
              speedInMb:any;
              speedBps:any;
              speedKbps:any;
              uspeedInMb:any;
              uspeedBps:any;
              uspeedKbps:any;
              ping: number = 0;
              pingArray:number[];
              imgPath:string;
              showLoader:boolean;
              startTime:any;



                constructor(private httpObj:SpeedService){
                 this.imgPath = "../assets/speed/bg.png"; 
                 this.showLoader = false;
                }

                myButtonStyle = {

                    'background':'#FF6C5B', 
                    'color':'#fff', 
                    'padding':'5px 10px',
                    'font-weight':'bold',
                    'cursor':'pointer'
                }




                    getSpeed(){

                    let downloadSize = 46057148;
                    let bitsLoaded = downloadSize * 8;
                    this.startTime = (new Date()).getTime();

                    this.httpObj.getDownloadSpeed()
                            .subscribe(
                                response => {

                                    let endTime = (new Date()).getTime();

                                     let duration = (endTime - this.startTime) / 1000;
                                     this.speedBps = (bitsLoaded / duration).toFixed(2);
                                     this.speedKbps = (this.speedBps/1024).toFixed(2);
                                     this.speedInMb= (this.speedKbps / 1024).toFixed(2);


                                     console.log("speed in mbps:"+this.speedInMb);

                                },
                                error => {
                                    alert(error);

                                }
                            );
                }



            }


            and my service code is

            import { Http } from '@angular/http';
            import { Injectable } from '@angular/core';

            import { Observable } from 'rxjs/Observable';
            import 'rxjs/add/operator/catch';
            import 'rxjs/add/observable/throw';

            import {Subject} from 'rxjs/Rx';
            import 'rxjs/Rx';

            @Injectable()
            export class SpeedService{

            private downloadString:string;




            pingStream: Subject<number> = new Subject<number>();
            ping: number = 0;
            url: string = "http://google.com";

            constructor(private loginServ: Http) {
                 this.downloadString  = "image file url";
            }




                getDownloadSpeed(){

                return this.loginServ.get(this.downloadString)
                                         .catch(this.catchError);   
                }




                private catchError(error:Response){
                    return Observable.throw(error || 'some error occurred');
                }

            }

        and my html code is

        <table align="center" style="width:1024px;">
          <tr><td colspan="3" style="text-align:center; color:#fff; font-family:verdana;"><h1>Speedtest</h1></td></tr>
          <tr><td colspan="3" align="center"><img [src]="imgPath" class="img-responsive" /></td></tr>
          <tr><td colspan="3" style="text-align:center;">
            <span *ngIf="!showLoader" [ngStyle]="myButtonStyle" (click)="getAvarageSpeed()">START NOW</span>
            <span *ngIf="showLoader"><img [src]="'../assets/speed/loader1.gif'" [ngStyle]="{'width':'150px', 'height':'40px'}"></span>
          </td></tr>
          <tr><td colspan="3">&nbsp;</td></tr>
          <tr>

          <td style="text-align:center; color:#FFF;"><strong>DOWNLOAD</strong> : {{speedInMb}} Mbps</td>


          </tr>
          </table>

I am uncertain where I might be going wrong. If someone can identify whether the problem lies within the service or the server side, and suggest a possible solution in Angular, it would be greatly appreciated as I am struggling to pinpoint the issue.