Angular 上的 Agora 集成获得“CORS 策略：无‘Access-Control-Allow-Origin’”

Posted 2023-03-14

【中文标题】Angular 上的 Agora 集成获得“CORS 策略：无‘Access-Control-Allow-Origin’”

【英文标题】：Agora integration on Angular getting "CORS policy: No 'Access-Control-Allow-Origin' "

【发布时间】：2021-04-16 12:56:02

【问题描述】：

我是 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 政策（或任何其他如果存在）问题？

提前感谢您的帮助。

【问题讨论】：

嗯，我认为您可以尝试代理您的请求，因此 Angular 应用程序甚至会在 localhost:4200 调用自己，然后代理将请求发送到另一个端点...here

我也试过了，但没有成功。我使用的代理配置"*":"target":"http://localhost:4200", "secure":false, "logLevel":"debug"

目标应该是webcollector-1.agora.io:6080，如果我明白你的目的

编译时给出的代理配置，编译日志显示配置应用成功，但没有任何改变。

@SwarajSatvaya 你是怎么解决这个问题的，你能帮帮我吗？

【参考方案1】：

所以 Agora 只允许来自启用了 CORS（安全协议）的服务器的请求。

因此，当您为 Angular Web 应用提供服务时，请确保您已启用 CORS。

您可以查看：This，了解如何在您身边启用 CORS。

或者，您可以在 node.js server 上托管 Angular 应用程序，这将绕过 CORS 错误，因为它是服务器端请求，而不是来自前端:)