仅当我在localhost中运行时，才能将外部库添加到Angular 6项目中

Question

我将Chrome Api库（从https://www.gstatic.com/cv/js/sender/v1/cast_sender.js ）动态添加到了我的项目中，并在使用localhost：4200运行时按预期运行。 但是，当我使用我的IP地址192.168.0.144:4200运行时不起作用。 在这种情况下，该应用可以运行，但是Chrome库无法正常工作。

这是我的代码：

  cast: any;

  constructor() {

  }

  ngOnInit(): void {
    console.log('ngOnInit()');

    const script = window['document'].createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1');
    window['document'].body.appendChild(script);

    window['__onGCastApiAvailable'] = (isAvailable) => {
      if (isAvailable) {
        this.cast = window['chrome'].cast;
        const sessionRequest = new this.cast.SessionRequest('<MY_APP_ID>');
        const apiConfig = new this.cast.ApiConfig(sessionRequest,
          s => { },
          status => { if (status === this.cast.ReceiverAvailability.AVAILABLE) { } }
        );
        const x = this.cast.initialize(apiConfig, this.onInitSuccess, this.onInitError);
      } else {
        console.log('CAST API is not available !!');
      }
    };

  }

与localhost一起使用 。

无法使用IP ...

我已经尝试将lib添加到index.html中 ，而不是在组件中动态添加，并且得到相同的结果。 我认为可能是CORS问题。 然后，我尝试配置此代理，但未成功：

{
  "/v1": {
    "target": "https://www.gstatic.com/cv/js/sender/",
    "secure": false,
    "changeOrigin": true
  }
}

并更改此行：

script.setAttribute('src', '/v1/cast_sender.js?loadCastFramework=1');

但是只有本地主机可以继续工作...帮助！

Answer 1

我终于解决了这个！ Chrome发送器应用程序需要支持HTTPS 。 因此，我与ngrok一起创建了一个隧道并工作。