title: TypeError: Failed to execute 'fetch' on 'Window': Invalid value
body: <p>I've tried to use fetch to call from backend using react, without libs (such as Axios). So I created this function:</p>
  
  <pre><code>export function api(url, method, body, isHeaderContentType,isRequestHeaderAuthentication,header, succesHandler, errorHandler) {
  const prefix = 'link';
  console.log("url:",prefix+url);
  const contentType = isHeaderContentType ? {
      'Content-Type': 'application/json',
  } : {};
  const auth = isRequestHeaderAuthentication
      ? {
          Authorization: `Bearer ${AuthUtils.getTokenUser}`,
      }
      : {};
  fetch(prefix + url, {
      method,
      headers: {
          ...contentType,
          ...auth,
          ...header,
  
      },
      protocol:'http:',
      body,
  })
      .then(response =&gt; {
          response.json().then(json =&gt; {
              if (response.ok) {
                  console.log("method", json);
                  if (succesHandler) {
                      succesHandler(json)
                  }
              } else {
                  return Promise.reject(json)
              }
          })
      })
      .catch(err =&gt; {
          console.log("error",`${url}  ${err}`);
          if (errorHandler) {
              errorHandler(err);
          }
      })
  </code></pre>
  
  <p>}
  and call it like this</p>
  
  <pre><code>api(
              `link`,
              "GET",
              null,
              true,
              true,
              null,
              response =&gt; {
                  this.setState({profile:response.data})
              },
              err =&gt; {
                  console.log('error', err);
              }
          );
  </code></pre>
  
  <p>i call my api() inside this function:</p>
  
  <pre><code>getProfileUser = () =&gt;{
      if (!isUserAuthenticated()){
          history.push('/signin')
      }else {
          api(
              `link`,
              "GET",
              null,
              true,
              true,
              null,
              response =&gt; {
                  this.setState({profile:response.data})
              },
              err =&gt; {
                  console.log('error', err);
              }
          );
      }
  };
  </code></pre>
  
  <p>this is my full component:</p>
  
  <pre><code>export default class Profile extends Component {
  constructor(props) {
      super(props);
      this.state = {
          profile:[]
      }
  
  }
  getProfileUser = () =&gt;{
      if (!isUserAuthenticated()){
          someCode
      }else {
          api(
              `link`,
              "GET",
              null,
              true,
              true,
              null,
              response =&gt; {
                  this.setState({profile:response.data})
              },
              err =&gt; {
                  console.log('error', err);
              }
          );
      }
  };
  
  componentDidMount() {
      this.getProfileUser();
  }
  
  render(){
      return(
          &lt;div&gt;
              hello 
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>but when i tried to run it, i got an error like this</p>
  
  <blockquote>
    <p>TypeError: Failed to execute 'fetch' on 'Window': Invalid value</p>
  </blockquote>
  
  <p>Is there anyone who knows what's wrong with my code? The function works when I use the "POST" method, but it doesn't work when I use "GET" method</p>