title: Custom teams app tab working only in browser
body: <p>Im currently making a custom teams app for MS Teams that fetches some data (just strings) from my localhost. However, while my app works fine in the browser version of teams, it doesnt work in the Teams application. Nothing even shows up in my custom tab:</p>
  <p><a href="https://i.stack.imgur.com/ub46k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ub46k.png" alt="Teams application" /></a></p>
  <p>However, in the browser version of the visual studio code debug window:
  <a href="https://i.stack.imgur.com/ribGl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ribGl.png" alt="Debug window" /></a></p>
  <p>Does anyone know why its only working in the visual studio code debug window? And how do i get it to work in both the browser version and the Teams application?</p>
  <p>The code of my app:</p>
  <pre><code>import React from 'react';
  import './App.css';
  import * as microsoftTeams from &quot;@microsoft/teams-js&quot;;
  
  class Tab extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        context: {}
      }
    }
  
    componentDidMount() {
      new Promise((resolve) =&gt; {
        microsoftTeams.getContext(resolve);
      })
        .then((context) =&gt; {
          this.setState({ context });
          //var inputs {}
          const queryParameters = new URLSearchParams({ function: &quot;getDocuments&quot;, input: '&quot;'+ context.userPrincipalName + '&quot;',});
          console.log(`userPrincipalName is '${context.userPrincipalName}'`);
          console.log(`teamName is '${context.teamName}'`);
          console.log(`http://localhost/openims/json.php?${queryParameters}`);
          return fetch(`http://localhost/openims/json.php?${queryParameters}`);
        })
        .then((res) =&gt; res.json())
        .then((result) =&gt; this.setState({ ...result }))
        .catch((error) =&gt; this.setState({ error }))
        .finally(() =&gt; this.setState({ isLoaded: true }));
    }
    
    render() {  
      const { error, isLoaded, name, age, city } = this.state;
      if (error) {
        return &lt;div&gt;Error: {error.message}&lt;/div&gt;;
      } else if (!isLoaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      } else {
        return (     
          &lt;ul&gt;
            &lt;li&gt;
              {name} {age} {city}
            &lt;/li&gt;
          &lt;/ul&gt;       
        );
      }
    }
  
  }
  export default Tab;
  </code></pre>