CODEWITHSUNDEEP
ionic3http-status-code-403
Elo
Elo

Reputation: 133

403 Forbidden on Console.log When Calling <img src="{{item.photo}}"> on Ionic 3

I made an APi call and want to retrieve {{item.photo}} which contains value of something like 

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

there is no problem when i opened it in a browser. the image is shown fine. but got error 403 forbidden when accessing it from Ionic 3 app.

What could be the problem and how to resolve it?

UPDATE

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>

Upvotes: 1

Views: 1572

Answers (3)

Elo
Elo

Reputation: 133

I solved the issue. Its caused by Hotlinking Protection by Cloudflare. On default, hotlinking protection is enabled. Simply switch it off on Scrape Shield Page to disable it.

Hopefully may help other who have the same issue like me.

Upvotes: 3

user8648665
user8648665

Reputation: 1

When getting 403 at response it means that the server refused your request.You need check if your IP has been blocked by this server.You said you can open it at browser,which means that your IP not blocked by server.You need check if you need add headers at your request when you visit this url. If no headers with your request,the server may think it is an robot visit the block your request and return 403 to you.

Upvotes: 0

Sampath
Sampath

Reputation: 65938

I highly suggest you use property binding instead of string interpolation like so.

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

Upvotes: 0

Related Questions