Question

您好我使用的是角度js版本5.2.6。我试图通过服务打一个网址。这个网址是一个图片网址。意味着如果您点击此网址，您将获得一个图像文件，仅此而已。我想知道点击该网址所花费的时间。当我点击网址时出现错误请求资源上没有“Access-Control-Allow-Origin”标头。我不能在服务器端做任何事情。在客户端，我使用的是proxy.config.json文件，其中包含以下代码。

{
      "/api": {
         "target": "image file url",
         "secure": false
    },
      "changeOrigin": true
}

然后我在package.json文件中修改我的代码

{"start": "ng serve --proxy-config proxy.config.json"}

但这也行不通。很好，我尝试使用JSONP。但是它为图像的MIME类型提供了错误。这是我的组件代码

import { Component, OnInit} from '@angular/core';
import { SpeedService } from './../speed.service';
import { Observable } from 'rxjs/Observable';
import {Subject} from 'rxjs/Rx';
@Component({
  selector: 'speedtest-app',
  templateUrl: './speedtest.html',
  styleUrls: ['./speedtest.css']
})
export class SpeedtestComponent implements OnInit{
  title = 'app';
  speed:any;
  speedInMb:any;
  speedBps:any;
  speedKbps:any;
  ping: number = 0;
  pingArray:number[];
  imgPath:string;
  showLoader:boolean;
  startTime:any;
  uploadEndTime:any;
  avarageDownloadArray:any[];
  avarageDownloadSpeed:number;


  pingStream: Subject<number> = new Subject<number>();

    constructor(private httpObj:SpeedService){

     this.imgPath = "../assets/speed/bg.png"; 
     this.showLoader = false;
     this.gaugeValue = 0;
     this.uploadText = false;
     this.downloadText = false;
     this.showGauge= true;
     this.gauzeText = "Start Now";
     this.gazeRes = false;

    }

        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);
                         this.getUploadSpeed();


                    },
                    error => {
                        alert(error);

                    }
                );
    }

}

我的服务代码是

import { Http, Headers, Response, RequestOptions, RequestMethod } 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;

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

}

我在过去20天内遇到此问题表单，无法解决此问题。请恳请一些人帮助我。我无法得到确切的解决方案。我还尝试了一个临时解决方案来安装CORS扩展。这样可行。但我知道这不是正确的解决方案。 Plesae有人告诉我该怎么办。我完全对这个问题感到沮丧。

Answer 1

您必须在服务器文件中添加一些标题。这不是角度错误。

您需要在服务器文件中添加以下行。

access-control-allow-credentials→true

access-control-allow-headers→Content-Type，Access-Control-Allow-Headers，Authorization，X-Requested-With

access-control-allow-methods→POST，GET

access-control-allow-origin→*

Answer 2

CORS问题通常在服务器上更正，而不是在Angular上。

虽然编码，但您可以像使用代理一样绕过问题。但是你应该将它用于代理的代码

{
  "/api": {
    "target": "http://localhost:4000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

这将显示控制台中的日志并绕过CORS问题。

要在代码中发出HTTP请求，您将使用

this.http.get('/api/image/123');

这将调用http://localhost:4000/api/image/123

编辑以计算图片的加载时间：

<img [src]="src" #image>

在您的组件中

src = 'www.something.com/images/filename.jpeg';
@ViewChild('image') img: ElementRef;

ngOnInit() {
  console.time('imageLoad');

  this.img.nativeElement.onload = () => {
    console.timeEnd('imageLoad');
  };

  this.img.nativeElement.src = this.src;
};

在角度4/2中，请求的资源上没有“Access-Control-Allow-Origin”标头

2 个答案: