Angular 4 - 请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-03

技术标签:

【中文标题】Angular 4 - 请求的资源上不存在“Access-Control-Allow-Origin”标头【英文标题】：Angular 4 - No 'Access-Control-Allow-Origin' header is present on the requested resource 【发布时间】：2018-01-03 00:14:54 【问题描述】：

我正在尝试在我的 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” 访问。

  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())

【问题讨论】：

headers 需要设置在后端，而不是前端... @AJT_82 我正在使用 Spotify API。我自己从来没有用过，所以真的帮不上忙……你试过这样的东西吗？ ***.com/a/41879977 @AJT_82 API 的其余部分工作正常，遇到 Authenticate API 的问题。在我链接的答案中有如何设置标题......这似乎是这里的问题。 【参考方案1】：

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

如果用于生产，那么您需要配置您的 API。

【讨论】：

【参考方案2】：

首先，您必须创建一个名为 proxy.conf.json 的文件，然后放入以下代码 "/restapiserver/*": "target": "http://localhost:8075", “安全”：错误， “changeOrigin”：真

在服务文件中，在rest服务的url中，删除域并保留服务的根

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

PS：在 AngularJS 4 中

【讨论】：

【参考方案3】：

如果问题还没有解决，请尝试在 js 中设置标题。

在 chrome 中添加“无访问控制允许来源”插件/附加组件。