加载资源失败：服务器以403状态响应-图像

Question

我发现了Angular，但在加载图片时遇到了一些问题。 我从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 

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

- mamenejr

---

你能在Chrome浏览器中尝试一下，并分享结果吗？我在直接使用Chrome浏览器浏览时没有发现任何问题，所以CORS问题不是一个选项。 - undefined

Answer 1

以下是翻译的结果：

下面是问题，只有在请求来自于"https://www.dofus.com"时这个资源才能使用，因为它是跨域的，也就是说你的代码运行在不同的主机上并从"https://s.ankama.com"请求资源。

除此之外，如果来源没有改变，则可以正常浏览。

现在，要解决这个问题，要么设置

access-control-allow-origin : *

如果您将文件上传到服务器上的目录或您的域名，则它将正常工作；请注意，您不能设置多个逗号分隔的域以允许访问。

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

- yanky_cranky

---

当我使用Postman时，我可以完美地检索到我想要的所有图像。但是当我使用Angular获取它们时，除了4-5张图像之外，大多数图像都无法正常工作。 那么我需要做什么才能获取这些图像呢？ - undefined

CORS是浏览器的一个属性，它帮助我们防止网络犯罪。因此，在Postman中它可以正常工作。我可以详细解释，但限于最大字符数。你可以参考同源策略，这将帮助你更清楚地理解你的问题。 - undefined

好的，所以没有办法绕过它吗？我在互联网上搜索了绕过的方法，但代理服务器返回的响应格式很奇怪。 - undefined

现在，由于资源只允许访问"https://www.dofus.com"，你可以选择直接向此服务器发起请求并获取资源。或者，由于这个问题只涉及到浏览器的跨域策略，你可以将请求发送到你的服务器（nodejs）或反向代理中，最终帮助你提供这个资源。 - undefined

Answer 2

您得到了403状态的代码，这种状态通常是由于未经授权造成的。

因此，请尝试使用一些头文件或所需的内容来获取此图像。

- ahmeticat

---

使用“header”获取图像是什么意思？ - undefined

请查看此链接（https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization），其中包含有关授权令牌的详细信息。另外，您能否分享您的图像URL？ - undefined

这是一张未能加载的图片：https://s.ankama.com/www/static.ankama.com/dofus/www/game/items/200/178073.png - undefined

没有问题，我可以显示图片。示例，可能是数据中的另一张图片有问题。 - undefined

当我发送一个HTTP GET请求来获取它时，我知道它是有效的。但是在50个图片中有大约20个无法加载。当你点击上面的链接时，它是有效的，但是当我检索大量数据时，它就不起作用了。 - undefined

Answer 3

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

根据我的经验，出于某种原因，这种方法更常见。

- developing2020

---

我刚刚测试了一下，仍然有一些图片无法加载，并且我得到了相同的错误。 - undefined