Question

我正在尝试使用我的Angular 4应用程序中的Spotify / Musixmatch API获取一些数据，但它无效。我一直收到这个错误：

XMLHttpRequest无法加载 http://api.musixmatch.com/ws/1.1/album.get?album_id=14250417&apikey=xyz010xyz。对预检请求的响应未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://localhost:9000” 访问。

JS

  let headers = new Headers();
    headers.append('Content-Type','application/json');
    headers.append('Accept', 'application/json');
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE, PUT');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Access-Control-Allow-Headers', "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding");
    let options = new RequestOptions({ headers: headers });
    console.log(options)
    return this.http.get(this.url + 'album.get?album_id=' + album_id + '&apikey=' + this.apikey, options)
      .map(res => res.json())
  }

Answer 1

这是浏览器的问题，通常是安全问题，不允许其他可能导致轻易导致XSS攻击的请求。如果仅用于开发，我建议您安装一个将在浏览器中禁用的插件 plugin

如果要进行生产，则需要配置API。

Answer 2

首先，您必须创建一个名为proxy.conf.json的文件，然后输入以下代码 { “ / restapiserver / *”：{ “ target”：“ http：//本地主机：8075”， “安全”：错误， “ changeOrigin”：为true } }

在服务文件的其余服务的URL中，删除域并保留服务的根目录

私人网址：string ='/ restapiserver /';

PS：在AngularJS 4中

Answer 3

如果尚未通过在js中设置标题解决问题，请尝试此操作。

添加＆＃34;没有访问控制允许来源＆＃34; chrome中的插件/插件。

哟可以在这里找到：NoAccessControlAllowOriginAddon

Angular 4 - 请求的资源

3 个答案: