Getting cors error only when calling image url via http request but all apis are working so well other than this

Question

Getting cors error only when calling image url via http request but all apis are working so well other than this.

Access to XMLHttpRequest at 'https://*********/diamond-grey.png' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

httpcall.ts

`let header = new Headers();
    header.set('Access-Control-Allow-Origin', '*');

    let options = new RequestOptions({ headers: header});
  await this.http.get(url,  {
        responseType: ResponseContentType.Blob,
      })
      .toPromise()
      .then((res: any) => {
        let blob = new Blob([res._body], {
          type: res.headers.get("Content-Type")
        });

        let urlCreator = window.URL;
        return this.domSanitizer.bypassSecurityTrustUrl(
              urlCreator.createObjectURL(blob));
        });`

Doflamingo19 · Accepted Answer · 2020-02-21 11:24:49Z

1

to resolve CORS problem you need to filter the request servers side and after modify the header with your policy. Angular is used for front end, you cannot modify the header to resolve CORS in angular, you must do in server.

answered Feb 21, 2020 at 11:24

Doflamingo19

1,6395 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Tokase · Accepted Answer · 2020-02-21 14:49:30Z

0

CORS header needs to set on server side and not on the front end code.

In your angular code, Instead of loading the image using xml http request you can create the image tag and provide the src dynamically. Please note that Image tag allows the CORS request so you wont face this CORS issue.

answered Feb 21, 2020 at 14:49

Rahul Tokase

1,22812 silver badges26 bronze badges

Collectives™ on Stack Overflow

Getting cors error only when calling image url via http request but all apis are working so well other than this

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related