TypeError: Failed to execute 'fetch' on 'Window': Invalid value

Question

I've tried to use fetch to call from backend using react, without libs (such as Axios). So I created this function:

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 => {         response.json().then(json => {             if (response.ok) {                 console.log("method", json);                 if (succesHandler) {                     succesHandler(json)                 }             } else {                 return Promise.reject(json)             }         })     })     .catch(err => {         console.log("error",`${url}  ${err}`);         if (errorHandler) {             errorHandler(err);         }     }) 

} and call it like this

api(             `link`,             "GET",             null,             true,             true,             null,             response => {                 this.setState({profile:response.data})             },             err => {                 console.log('error', err);             }         ); 

i call my api() inside this function:

getProfileUser = () =>{     if (!isUserAuthenticated()){         history.push('/signin')     }else {         api(             `link`,             "GET",             null,             true,             true,             null,             response => {                 this.setState({profile:response.data})             },             err => {                 console.log('error', err);             }         );     } }; 

this is my full component:

export default class Profile extends Component { constructor(props) {     super(props);     this.state = {         profile:[]     }  } getProfileUser = () =>{     if (!isUserAuthenticated()){         someCode     }else {         api(             `link`,             "GET",             null,             true,             true,             null,             response => {                 this.setState({profile:response.data})             },             err => {                 console.log('error', err);             }         );     } };  componentDidMount() {     this.getProfileUser(); }  render(){     return(         <div>             hello          </div>     ) } 

}

but when i tried to run it, i got an error like this

TypeError: Failed to execute 'fetch' on 'Window': Invalid value

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

Answer 1

This also happened to me when I tried to add an Authorization header to my fetch calls. In my case it was caused by a newline character in the header string, i.e. Bearer:\nsomelong-token. Changing the new line to a space solved the problem.

Answer 2

For me, i had an invalid character in a key of the header object. I accidentally included the ":" and this throws the error described. Really difficult to visually see in the chrome console. Hope it helps someone.

{ 'Authorization:':'Bearer etc...' }