问题描述
我是 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,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 Web 应用提供服务时，请确保已启用 CORS。
您可以查看：This 以了解如何在您身边启用 CORS。
或者，您可以在 node.js server 上托管 Angular 应用程序，这将绕过 CORS 错误，因为它是服务器端请求，而不是来自前端的请求 :)