将外部库添加到我的 Angular 6 项目仅在我在本地主机中 运行 时有效

Question

我将 Chrome Api 库（来自 https://www.gstatic.com/cv/js/sender/v1/cast_sender.js）动态添加到我的项目中，当我 运行 使用 localhost:4200。但是，当我 运行 使用我的 IP 时它不起作用：192.168.0.144:4200。在这种情况下，应用 运行s，但 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...

我已经尝试在 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');

但只有 localhost 继续工作...帮助！

Answer 1

终于解决了！！ Chrome 发件人应用需要支持 HTTPS。所以，我用 ngrok 制作了一个 tunel 并开始工作。