加载资源失败：服务器回应状态为403-图片

Question

我发现角度，在加载图像时遇到一些问题。 我从API检索到图像的链接，并将恢复的链接分配给我的图像源。 但是，某些图像无法加载，并且在Chrome控制台中出现以下错误：

Failed to load resource: the server responded with a status of 403

我也在Chrome和Edge上尝试过，但是问题仍然存在。 在Chrome控制台中，我可以看到加载失败的链接。当我单击链接时，我仍然访问该图像。 令人惊奇的是，一旦我单击链接并重新加载页面，图像就会加载到我的页面上。

以下是一些代码：

检索数据的组件：

@Component({
  selector: 'app-idole-list',
  templateUrl: './idole-list.component.html',
  styleUrls: ['./idole-list.component.css']
})
export class IdoleListComponent implements OnInit {
  idols;
  constructor(
    private myService: MyService
  ) {
    this.idols = myService.getData();
   }

  ngOnInit() {
  }

}

我的组件的HTML：

<div class="clr-row">
    <div class="clr-col-4" *ngFor="let idol of idols | async">
        <div class="card" >
            <div class="card-block">
                <h3 class="card-title">{{ idol.name }}</h3>
            </div>
            <div class="card-img">
                <img [src]="idol.imgUrl">
            </div>
        </div>
    </div>
</div>

编辑：

在Firefox中，这是来自其中一张图片的GET请求的响应：

Access Denied
You don't have permission to access "http://ankama.akamaized.net/www/static.ankama.com/dofus/www/game/items/200/178102.png" on this server.

Reference #18.47327b68.1563645916.138751e4 

我不知道为什么我禁止在图像的一半上访问

Answer 1

这是下面所附的问题，因此，只有当请求来自“ https://www.dofus.com”时才可以使用该资源，例如，您的代码在不同的主机上运行并从“ https://s.ankama.com”

否则，由于原点不会改变，因此浏览效果会很好。

现在，要解决此问题，请

access-control-allow-origin : *

或服务器上的您的域，它将正常工作；请注意，您不能将多个域逗号分隔以允许访问。

如果该服务器不在您的控制范围内，那么根据浏览器的行为，如果它是跨源请求，它将不允许加载该资源，请阅读cors

Answer 2

尝试<img src="{{idol.imgUrl}}">

根据我的经验，由于某种原因，这种方式更有效。

Answer 3

您将获得if(Currency.getAvailableCurrencies().contains(Currency.getInstance("my currency"))) ，因此此状态是由于授权而引起的。

因此，请尝试使用某些标头或任何所需的图片获取该图片