No 'Access-Control-Allow-Origin' header is present

[BhaskaranR]

I tried to load the image using the src attribute and it give me this error

XMLHttpRequest cannot load http://ec2-54-89-102-18.compute-1.amazonaws.com/unsafe/480x270/smart/H1J3uMGcW.jpeg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4201' is therefore not allowed access.

  ngAfterViewInit(){
    let image: HTMLImageElement = new Image();
    image.onload = ()=> {
      this.cropper.setImage(image);
    };
    image.src = this.selectedImageSrc;
  }

please help me fix this

[BhaskaranR]

i tried setting this as well image.crossOrigin = "Anonymous"; with no luck

[dogLin]

I tried add image.crossOrigin = "Anonymous", but still error. can you tell me your how do you do in server silent for CORS.

below is my code and error client:

  ngAfterViewInit() {
    let image: HTMLImageElement = new Image();
    image.crossOrigin = "Anonymous"
    image.onload = ()=> {
      this.cropper.setImage(image);
    };
    image.src = this.picurl;
  }

server:

app.all('*', function(req, res, next) {
    console.log(req.method);
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Headers', 'Content-type');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");
    res.header('Access-Control-Max-Age',1728000);
});

and error :

Access to Image at 'http://192.168.9.176:3000/images/logo.png' from origin 'http://192.168.9.92:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.9.92:4200' is therefore not allowed  @access.