angular - Angular 上的 Agora 集成获得“CORS 政策：无‘Access-Control-Allow-Origin’”
问题描述
我是 Angular 的新手。我正在为 POC 创建一个演示应用程序。主要是在 Angular 上集成 Agora sdk 进行视频通话。我从 github 获得了 angular 的 agora 集成代码，并按如下方式实现，其中在单击按钮时调用了 `startCall()` 方法：
startCall() {
this.agoraService.client.join("00665c104a669ec101896fa4eaIjvT3g0EdH+Gc6qCPd063IEz/sstOTIVvMejjP6HYMoU", 'TestChannel', null, (uid) => {
this.localStream = this.agoraService.createStream(uid, true, null, null, true, false);
this.localStream.setVideoProfile('720p_3');
this.subscribeToStreams();
});
}
private subscribeToStreams() {
this.localStream.on("accessAllowed", () => {
console.log("accessAllowed");
});
// The user has denied access to the camera and mic.
this.localStream.on("accessDenied", () => {
console.log("accessDenied");
});
this.localStream.init(() => {
console.log("getUserMedia successfully");
this.localStream.play('agora_local');
this.agoraService.client.publish(this.localStream, function (err) {
console.log("Publish local stream error: " + err);
});
this.agoraService.client.on('stream-published', function (evt) {
console.log("Publish local stream successfully");
});
}, function (err) {
console.log("getUserMedia failed", err);
});
this.agoraService.client.on('error', (err) => {
console.log("Got error msg:", err.reason);
if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {
this.agoraService.client.renewChannelKey("", () => {
console.log("Renew channel key successfully");
}, (err) => {
console.log("Renew channel key failed: ", err);
});
}
});
this.agoraService.client.on('stream-added', (evt) => {
const stream = evt.stream;
this.agoraService.client.subscribe(stream, (err) => {
console.log("Subscribe stream failed", err);
});
});
this.agoraService.client.on('stream-subscribed', (evt) => {
const stream = evt.stream;
if (!this.remoteCalls.includes(`agora_remote${stream.getId()}`)) this.remoteCalls.push(`agora_remote${stream.getId()}`);
setTimeout(() => stream.play(`agora_remote${stream.getId()}`), 2000);
});
this.agoraService.client.on('stream-removed', (evt) => {
const stream = evt.stream;
stream.stop();
this.remoteCalls = this.remoteCalls.filter(call => call !== `#agora_remote${stream.getId()}`);
console.log(`Remote stream is removed ${stream.getId()}`);
});
this.agoraService.client.on('peer-leave', (evt) => {
const stream = evt.stream;
if (stream) {
stream.stop();
this.remoteCalls = this.remoteCalls.filter(call => call === `#agora_remote${stream.getId()}`);
console.log(`${evt.uid} left from this channel`);
}
});
}
在从 chrome 浏览http://localhost:4200/或http://192.168.43.152:4200/时，应用程序运行良好，但其控制台始终打印以下内容，并且单击按钮时没有任何反应：
Access to XMLHttpRequest at 'https://cds-ap-web-1.agora.io/api/v1?action=config' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zone-evergreen.js:2863 POST https://cds-ap-web-1.agora.io/api/v1?action=config net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'https://cds-ap-web-4.agoraio.cn/api/v1?action=config' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zone-evergreen.js:2863 POST https://cds-ap-web-4.agoraio.cn/api/v1?action=config net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'https://cds-ap-web-2.agoraio.cn/api/v1?action=config' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
zone-evergreen.js:2863 POST https://cds-ap-web-2.agoraio.cn/api/v1?action=config net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?eventType=session_init' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?eventType=session_init net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?eventType=join_choose_server' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?eventType=join_choose_server net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?eventType=join_choose_server' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?eventType=join_choose_server net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?apiName=_config-distribute-request' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?apiName=_config-distribute-request net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?eventType=join_choose_server' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?eventType=join_choose_server net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?eventType=join_choose_server' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?eventType=join_choose_server net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?apiName=checkSystemRequirements' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?apiName=checkSystemRequirements net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?apiName=createClient' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?apiName=createClient net::ERR_FAILED
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?apiName=Client.init' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?apiName=Client.init net::ERR_FAILED
6[Violation] 'setInterval' handler took <N>ms
localhost/:1 Access to XMLHttpRequest at 'http://webcollector-1.agora.io:6080/events/message?apiName=Client.join' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
zone-evergreen.js:2863 POST http://webcollector-1.agora.io:6080/events/message?apiName=Client.join net::ERR_FAILED
我无法弄清楚如何解决该CORS 政策（或任何其他如果存在）问题？
在此先感谢您的帮助。
解决方案
所以 Agora 只允许来自启用了 CORS（安全协议）的服务器的请求。
因此，当您提供 angular webapp 时，请确保您启用了 CORS。
您可以查看：查看如何在您这边启用 CORS。
或者，您可以在node.js 服务器上托管 Angular 应用程序，这将绕过 CORS 错误，因为它是服务器端请求，而不是来自前端:)
推荐阅读
- machine-learning - 如何将二元分类器分类为具有 3 个标签的分类器？
- linux - 如何使用“find /export/reports -mtime +112 -type f -delete”恢复删除的文件
- perl - 在 @INC 中找不到 XML/Writer.pm。无法在 @INC 中找到 DBD/CSV.pm
- angular - 是否有任何放大和缩小功能，例如加号，减号放大图标来显示 echarts？
- flutter - 如何在颤动中动态调整容器大小？
- postgresql - Postgres如何分割一个100行的结果，每列有10个项目？
- bash - 如何使用 sed 将文件中的特定行替换为另一个文件中的内容
- c# - WPF 中的非模态窗口
- networking - xterm 显示与 mininet
- tensorflow2.0 - 尝试在不构建函数 tf.keras.models.save_model 的情况下捕获 EagerTensor