Angular 否'；访问控制允许原点'；标头以4/2的形式存在于请求的资源上

嗨，我正在使用angular js 5.2.6版。我正试图通过服务点击一个url。此url是图像url。意思是如果你点击这个url，你会得到一个图像文件，除此之外什么都没有。我想知道点击那个网址所花的时间。当我点击url时，我得到一个错误请求的资源上不存在“访问控制允许来源”标题。我不能在服务器端做任何事情。在客户端，我使用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);

                    }
                );
    }

}

---

在过去的20天里，我一直在处理这个问题，无法解决这个问题。请找个人来帮我。我无法得到确切的答案。我还尝试了安装CORS扩展的临时解决方案。这很有效。但我知道这不是正确的解决办法。请有人告诉我该怎么办。我对这个问题感到非常沮丧。

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>

---

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

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

访问控制允许凭据→真的

访问控制允许标头→内容类型、访问控制允许标头、授权、X请求权限

访问控制允许方法→发帖

---

访问控制允许源→*

您必须在服务器端启用cors，但我对服务器没有任何控制权。这次我收到404错误。trichetriche有一件事我忘了澄清，我的服务器地址是localhost:4000（本地地址）。myimage文件位于另一个实时服务器上。假设我的图像文件位于www.something.com/images/filename.jpeg上。但是当我通过

{”/api:{“target”：“www.something.com”，“secure”：false，“changeOrigin”：true，“logLevel”：“debug”}

你的图像不是问题所在。HTML可以毫无问题地加载图像。您的问题是Ajax调用不能进入其他域。我编辑我的答案以将您的真实地址纳入配置，请看一看等待Trichetrich让我先完成我所做的。当我传递服务url

this.loginServ.get（'/images/filename.jpeg'）

时。然后它给出一个404错误。因为它尝试在localhost:4200/images/filename.jpeg上访问，而我的文件位于www.something.com/images/filename.jpeg，所以您不需要通过HTTP调用请求图像。。。这应该是图像的来源。

我无法在服务器端执行任何操作。

。这可能会有所帮助。请尝试以下操作：

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