角度為4/2的請求資源上沒有'Access-Control-Allow-Origin'標頭

Question

嗨，我正在使用angular js版本5.2.6。 而且我正在嘗試通過服務訪問網址。 該網址是圖片網址。 也就是說，如果您點擊該網址，您將獲得一個圖像文件，僅此而已。 我想知道點擊該網址所花費的時間。 當我點擊url時出現錯誤，請求的資源上沒有'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擴展程序。 這樣可行。 但我知道這不是正確的解決方案。 斑les有人告訴我該怎么辦。 我對這個問題完全感到沮喪。

Answer 1

您必須在服務器文件中添加一些標頭，這不是一個角度錯誤。

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

訪問控制允許憑證→true

訪問控制允許標題→內容類型，訪問控制允許標題，授權，X請求使用

訪問控制允許方法→POST，GET

訪問控制允許來源→*

Answer 2

通常在服務器而不是Angular上糾正CORS問題。

但是，在編碼時，您可以像使用代理一樣繞過問題。 但是您應該使用它作為代理代碼

{
  "/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;
};