在 Ionic 3 上调用 <img src="{{item.photo}}"> 时，Console.log 上的 403 Forbidden答案

【问题标题】：403 Forbidden on Console.log When Calling <img src="{{item.photo}}"> on Ionic 3在 Ionic 3 上调用 <img src="{{item.photo}}"> 时，Console.log 上的 403 Forbidden
【发布时间】：2017-12-27 11:13:17
【问题描述】：

我进行了一个 APi 调用并想要检索 {{item.photo}} ，其中包含类似

的值

http://example.com/img/1461212599.jpg

当我在浏览器中打开它时没有问题。图像显示正常。但从 Ionic 3 应用程序访问时出现错误 403。

可能是什么问题以及如何解决？

更新

休息提供者

getItembyCategory() {
    return this.http.get(this.apiUrl)
     .toPromise()
     .then(data => {
        return data;
     })
     .catch(err => {
        return err;
     })
   }

Home.ts

import { RestapiProvider } from './../../providers/restapi/restapi';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items; 

  constructor(public navCtrl: NavController, public restProvider: RestapiProvider) {

  }

  getProduct(){
    this.restProvider.getItembyCategory()
     .then(data => {
       this.items = data['details']['item'];
    });
  }

  generatePriceArray(obj){
    return Object.keys(obj).map((key)=>{ return obj[key]});
 }

ionViewDidLoad(){
  this.getProduct();
}

}

Home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list inset >
      <ion-item *ngFor="let item of items">
          <ion-thumbnail item-start>
            <img src="{{item.photo}}">
          </ion-thumbnail>
          <h2 text-wrap>{{item.item_name}}</h2>
          <p *ngFor="let price of generatePriceArray(item)"> {{price.price}}</p>
      </ion-item>
  </ion-list>
</ion-content>

【问题讨论】：

如果您可以在此处发布实际 URL，这将很有帮助 - 听起来图像不是 100% 公开的。它在隐身模式下工作吗？如果需要身份验证，浏览器可能会发送正确的 cookie，但您的 API 调用可能不会。
你能出示你的code吗？
感谢您的回复。我用代码更新。如果您需要更多，请告诉我
不需要授权
你能把你的HTML和ts代码也显示一下吗？

标签： ionic3 http-status-code-403

【解决方案1】：

我解决了这个问题。它是由 Cloudflare 的热链接保护引起的。默认情况下，启用盗链保护。只需在 Scrape Shield 页面上将其关闭即可禁用它。

希望可以帮助像我一样遇到同样问题的其他人。

【讨论】：

【解决方案2】：

我强烈建议你使用property binding 而不是string interpolation 像这样。

 <img [src]="item?.photo">

【讨论】：

item.photo的值是多少？
好像user is authenticated but not authorized to access the resource (or image)。
我尝试用服务器ip替换域名，它可以工作
好的。伟大的。接下来你会做什么？
但我不能使用服务器 ip。这是不可能的

【解决方案3】：

返回403表示服务器拒绝了你的请求。你需要检查你的IP是否被这个服务器屏蔽了。你说你可以在浏览器打开它，说明你的IP没有被服务器屏蔽当您访问此网址时，需要检查您是否需要根据您的请求添加标题。如果您的请求没有标头，服务器可能会认为这是一个机器人访问阻止您的请求并返回 403 给您。

【讨论】：