1

I have tried to get the information of the Mangaeden API and I have successfully get a response but when I rendered the image from the url. I got an error 403. It seems there is a problem in requesting in the API.

This is the error in the application.

GET https://cdn.mangaeden.com/mangasimg/63/63df51e43ebfb8983eb39744496b27ef6173b2237535b9c2408ea32d.jpg 403

But when I tried to load the url in the browser and the next time I try it on my application, It works because I think it will cache the image in the browser.

This is the Mangaeden API Information

You can get all manga informations, chapters and mymanga with mangaeden's API. All the informations are sent in JSON format. You can either use HTTP or HTTPS (advised if you need to use the mymanga's API). Important: we require every API user to have a link to our site in their application/site. New: We also support CORS now

About this. Where can I add their link

We require every API user to have a link to our site in their application/site.

HTML

<img src="{{url}}">

Code for component

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
})
export class ListComponent implements OnInit {
  url: String;

  constructor(private mangaedenService: MangaedenService) {}

  isRedered(id) {
    this.url = null;

    this.mangaedenService.getInfo(id)
      .subscribe(data => {
        this.url = 'https://cdn.mangaeden.com/mangasimg/' + data.image;
      });
  }
}

Code for service

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
}) 
export class MangaedenService {

  constructor(private http: HttpClient) {}

  getInfo(id) {
    return this.http.get('https://www.mangaeden.com/api/manga/' + id)
      .map(this.extract);
  }

  private extract(res: Response | any) {
    return res || {};
  }
}
Richard Vergis
  • 1,037
  • 10
  • 20
  • In `MangaedenService` how exactly are you able to call `map` on `http.get` in the first place? If you're using Angular 6 shouldn't you call `pipe` on `get` and then pass `map` inside it? Also, I don't really see a need for this `map` in here. Finally, could you please create a sample stackblitz replicating this issue? – SiddAjmera Sep 18 '18 at 04:21
  • When I added this one `'Access-Control-Allow-Origin': '*'` **Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.** – Richard Vergis Sep 18 '18 at 07:31

1 Answers1

2

Actually, there is no problem in my code. I got error when rendering images in html which got 403 response. I added this in my html code and It works.

<meta name="referrer" content="no-referrer"/>

You can also check this out

Remove http referer

Richard Vergis
  • 1,037
  • 10
  • 20