Javascript Angular 4 - 请求的资源上不存在“Access-Control-Allow-Origin”标头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45347860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 - No 'Access-Control-Allow-Origin' header is present on the requested resource
提问by Sumit Ridhal
I'm trying to get some data with Spotify / Musixmatch API in my Angular 4 app but it is not working. I keep getting this error:
我试图在我的 Angular 4 应用程序中使用 Spotify / Musixmatch API 获取一些数据，但它不起作用。我不断收到此错误：
XMLHttpRequest cannot load http://api.musixmatch.com/ws/1.1/album.get?album_id=14250417&apikey=xyz010xyz. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.
XMLHttpRequest 无法加载 http://api.musixmatch.com/ws/1.1/album.get?album_id=14250417&apikey=xyz010xyz。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost:9000'。
JS
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())
}
回答by Harsha ANS
This is the problem with browser, typically its a security concern not to allow other requests which may lead to XSS attack easily. If only for development I suggest you to install a plugin which will disable in your browser plugin
这是浏览器的问题，通常是出于安全考虑，不允许其他可能容易导致 XSS 攻击的请求。如果仅用于开发，我建议您安装一个插件，该插件将在您的浏览器插件中禁用
If for production, then you need to configure your API.
如果用于生产，那么您需要配置 API。
回答by Andres Quesada
First, you have to create a file called proxy.conf.json, then put the following code { ???? "/ restapiserver / *": { ???????? "target": "http: // localhost: 8075", ???????? "secure": false, ???????? "changeOrigin": true ???? } }
首先，您必须创建一个名为 proxy.conf.json 的文件，然后输入以下代码 { ???? "/restapiserver /*": { ???????? "target": "http://localhost:8075", ???????? “安全”：假，？？？？？？？？？“changeOrigin”：真的？？？？} }
In the service file, in the url of the rest service, delete the domain and leave the root of the service
在服务文件中，在其余服务的url中，删除域并保留服务的根
private url: string = '/ restapiserver /';
私人网址：string = '/restapiserver /';
PS: In AngularJS 4
PS：在 AngularJS 4 中
回答by Xavi
Try this if not yet problem solved by setting header in js.
如果还没有通过在 js 中设置标题来解决问题，请尝试此操作。
Add "no access control allow origin" plugin/add-on in chrome.
在 chrome 中添加“无访问控制允许来源”插件/附加组件。
Yo can find here:NoAccessControlAllowOriginAddon
你可以在这里找到：NoAccessControlAllowOriginAddon
