由于“CORB”问题，无法从“跨域”获取数据

Question

我试图从我的localhost获取数据，就像这样：

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.

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

Answer 1

我决定现在最好的选择是在超文本传输协议选项中指示将响应作为文本数据。浏览器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算法在修改用户呼叫中的数据时似乎仍然处于活动状态。

如果您想进一步处理它，您可能需要将它保存到一个类变量中，并从那里解析它。