Question

我做了一个APi电话，想要检索包含

等值的{{item.photo}}

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

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

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

更新

Rest Provider

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>

Answer 1

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

希望能帮助其他像我一样有问题的人。

Answer 2

我强烈建议您使用property binding代替string interpolation。

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

Answer 3

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

403在Ionic 3上调用<img src="{{item.photo}}"/>时，Console.log上禁止访问

3 个答案: