请求的resource.in angular 4服务中没有“Access-Control-Allow-Origin”标头

Question

嗨，我正在使用一个服务，该服务正在点击放置图像文件的URL。但是当它点击url时，它会在控制台中显示错误。无法加载“我的文件网址”：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许原创'http://localhost:4200'访问。它只是击中图像文件网址。我试图计算击中网址之前和之后的时间。但它给出了上述错误。我没有得到确切的解决方案。安装CORS扩展后有一个临时解决方案，但它不是处理它的完美方式。请帮我删除该错误。我完全坚持下去。这是我的组件代码

            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 don't know that where i am doing mistake. Please some tell me that is it problem of service(client side) or server. is there any solution in angular. because on server side i am doing nothing just hitting the URL and nothing. i am not getting anything in response also which can create problem.

Answer 1

使用代理支持并设置"changeOrigin": true请参考此链接Proxy To Backend。

试试吧

            constructor(private loginServ: Http) {
                 this.downloadString  = "api"; //replace image url with this
            }

使用代理支持，使用以下配置创建proxy-config.json

  {
      "/api": {
         "target": "http://speedspot.speedspot.netdna-cdn.com/speedspot3000x3000.jpg",
         "secure": false
    }
      "changeOrigin": true
    }

在你的package.json中

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json"//add this script

运行npm start，看看它是否正常工作。