Question

我是角色2的新手，我正在尝试使用以下代码向Spotify Api发出http请求以获取数据。

服务：

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SpotifyService{
    private searchUrl: string;

    constructor(private _http:Http){
       // this.searchUrl = ''; 
    }

    searchMusic(str:string, type="artist"){
        this.searchUrl = `https://api.spotify.com/v1/search?query=${str}&offset=0&limit=20&type=${type}&market=US`;
        console.log(this.searchUrl);
        return this._http.get(this.searchUrl).map(res => res.json());
    }
}

组件：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import {SpotifyService} from '../../services/spotify.service';

@Component({
    moduleId: module.id,
    selector: 'search',
    templateUrl: 'search.component.html',
    providers: [SpotifyService]
})

export class SearchComponent {

    searchStr:string;

    constructor(private _spotifyService:SpotifyService){

    }

    searchMusic(){
        //console.log(this.searchStr);
        this._spotifyService.searchMusic(this.searchStr).subscribe(res => { console.log(res.artist.items)});
    }
}

在向API发出请求时，我收到此错误

EXCEPTION：状态响应：找不到404的URL： http://localhost:3000/https/api.spotify.com/v1/search?query=a&offset=0&limit=20&type=artist&market=US

在控制台中，this.searchUrl的值为

https://api.spotify.com/v1/search?query=a&offset=0&limit=20&type=artist&market=US

但在提出请求时，会在其前面添加基本网址，即http://localhost:3000。如何从searchUrl中删除此基本网址，以便我可以向spotifyAPI发出请求。

Answer 1

使用反向代理可以使您的Spotify API查询正常运行。

某些背景信息：出于安全原因，默认情况下，大多数浏览器都不允许直接访问服务于您网页的服务器以外的服务器。这包括Web服务器使用的主机名和端口。 developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

这可以通过使用反向代理来克服。配置将取决于用于为页面提供服务的Web服务器，因为需要代表您的网页进行API调用，然后将结果转发回来。

如果您使用＆＃34; ng serve＆＃34;为Angular 2应用程序提供服务，您可以按如下方式配置代理：

在基础项目目录中创建一个名为＆＃34; proxy.conf.json＆＃34;

的新JSON文件

添加以下内容： { "/v1": { "target": "https://api.spotify.com", "secure": true, "changeOrigin": true, "logLevel": "debug" } }

打开package.json并找到start命令。它看起来像这样：＆＃34;开始＆＃34;：＆＃34; ng serve＆＃34;

进行以下更改："start": "ng serve --proxy-config proxy.conf.json"

现在修改您的SpotifyService http调用，如下所示：

this.searchUrl = `/v1/search?query=${str}&offset=0&limit=20&type=${type}&market=US`;

从$ http.get中删除Base url - angular 2

1 个答案: