How do I handle the following CORS issue in Angular?

Question

I have to use images that do not reside on Angular: I.e.:

https://thehill.com/wp-content/uploads/sites/2/2022/05/cropped-favicon.png?w=180

the call from Angular is like so:

<div class="col-12 d-flex col-xs-12 col-sm-6 col-md-4 col-lg-3 mb-4"
    *ngFor="let site of category.sites">
    <a class="card-link" href="#">
       <h6 class="text-muted d-flex justify-content-center mb-2" style="font-size: 20px;">
      {{site.url}}
       </h6>
       <img class="img-fluid news-logo" src="{{site.img}}">
    </a> 
</div>

I am getting a CORS error:

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

Answer 1

The image you have linked can be opened directly in the browser. So, it should not be generating CORS error.

You need to check in the network panel (filter by img only). If you can see the image being downloaded correctly, then the problem is somewhere else.

Click on the error in the console to see any associated stacktrace that might be helpful.