4

I am trying to fetch data from my localhost as like this:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

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

    apiRoot:string = 'https://itunes.apple.com/search';
    results:Object[];
    loading:boolean;

    constructor(private http:HttpClient) {
        this.results = [];
        this.loading = false;
    }

    search(term:string){
        let promise = new Promise((resolve, reject) => {
            let apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20`;
            this.http.get(apiURL).toPromise().then(res => {
                // console.log( res.json() );
                resolve();
            }, function(error){
                console.log('error is', error);
            })
        });
        return promise;
    }
}

I am using Chrome browser. to prevent the CORS issue i use this extension:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en-US

But still getting the error as :

Failed to load https://itunes.apple.com/search?term=Moo&media=music&limit=20: The 'Access-Control-Allow-Origin' header contains multiple values 'http://evil.com/, *', but only one is allowed. Origin 'http://localhost:4200' is therefore not allowed access.

zone.js:2969 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://itunes.apple.com/search?term=Moo&media=music&limit=20 with MIME type text/javascript. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Not getting the data. what are the changes is I require to do here? anyone help me?

Al-Mothafar
  • 7,949
  • 7
  • 68
  • 102
user2024080
  • 1
  • 14
  • 56
  • 96
  • 1
    @anyone - instead of just putting `down vote` looking for some help – user2024080 Jul 09 '18 at 14:16
  • `CORS` is preventing you from getting data. It doesn't matter if you enable through chrome if server don't let you get in then you ain't getting no data – Mike Tung Jul 09 '18 at 14:16
  • If I just past the url in the browser window, I am getting the data.. – user2024080 Jul 09 '18 at 14:20
  • I have outlined a solution that worked for me here. https://stackoverflow.com/questions/47345282/how-to-add-cors-request-in-header-in-angular-5/47933410#47933410 – rgantla Jul 09 '18 at 14:27
  • Did anyone found solution to this – Vinodh Ram Sep 04 '18 at 04:58
  • CORB or Cross-origin read blocking is a new security feature by chrome/google. This has nothing to do with improper cors implementation. I don't have an answer for this yet but when I do I'll come back. – Patrick Odum May 24 '19 at 04:19
  • I would also like to mention from what I looked up this has to do with the browser checking the data that comes in from another site and replacing anything it views as "harmful" with an empty object so that it is not stored in memory and able to use code meant to read sensitive data (spectre or meltdown attacks) – Patrick Odum May 24 '19 at 04:22
  • I guess the question now is how to properly send a request in a manner that lets the browser know that it is save to store the response data in memory and render it. – Patrick Odum May 24 '19 at 04:23

1 Answers1

0

I decided that the best option for now is to indicate in the http options to get the response as text data. The browsers corb algorithm will ignore text data.

const httpOptions = {
  headers: new HttpHeaders({
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }),
  responseType: 'text' as 'json'
}

...

search(term:string){
    let promise = new Promise((resolve, reject) => {
        let apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20`;
        this.http.get(apiURL, httpOptions).toPromise().then(res => {
            // console.log( res.json() );
            resolve();
        }, function(error){
            console.log('error is', error);
        })
    });
    return promise;
}

It is then up to you to parse the response data back into json. The browsers corb algorithim still seems to be active while tinkering with the data in the subscriber call.

You will probably have to save it to a class variable and parse it from there if you'd like to do anything further with it.

Patrick Odum
  • 224
  • 2
  • 14