5

我正在尝试从我的本地主机获取数据，如下所示：

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;
    }
}

我正在使用Chrome浏览器。为了防止这个CORS问题我使用这个扩展：

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

但仍然得到错误：

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.

没有得到数据。我需要在这里做哪些更改？有人帮我吗？

4

1 回答 1

0

我决定目前最好的选择是在 http 选项中指明以文本数据形式获取响应。浏览器 corb 算法将忽略文本数据。

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;
}

然后由您将响应数据解析回 json。在修改订阅者呼叫中的数据时，浏览器 corb 算法似乎仍然处于活动状态。

如果您想进一步使用它，您可能必须将它保存到一个类变量并从那里解析它。

于 2019-05-24T05:40:03.843 回答