无法加载资源:服务器的响应状态为403-图片 [英] Failed to load resource: the server responded with a status of 403 - Image

问题描述

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

I discover angular and I have some problems when loading images. I retrieve links to images from an API and assign the recovered link to the source of my image. However, some images do not load and I get the following error in the Chrome console:

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

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

I also tried it with Chrome and Edge but the problem persists. In the Chrome console, I can see the links that failed to be loaded. When I click on the link, I still access the image. What is amazing is that once I click on the link and reload the page, the image loads onto my page.

以下是一些代码:

检索数据的组件:

@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请求的响应:

In Firefox, here is the response from a GET request of one of the images :

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 

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

I don't know why I get a forbidden access on the half on the images

推荐答案

以下是问题所在，因此，仅当请求来自"

Here is the issue attached below, so this resource can be available only if request is coming from "https://www.dofus.com" when its a cross-origin, i.e your code is running on different host and asking a resource from "https://s.ankama.com"

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

else, it will browse perfectly fine, since origin will not change.

现在，要解决此问题，请

Now, to fix this either set

access-control-allow-origin : *

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

or to your domain on the server, then it will work; note you cannot set multiple domains comma separated to allow access.

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

If this server is not in your control, then as per the browser behavior it will not allow to load that resource if its a cross-origin request, read cors

这篇关于无法加载资源:服务器的响应状态为403-图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！