Hide 401 console.error in chrome dev tools getting 401 on fetch() call [duplicate]

Unfortunately, this cannot be done, as this type of message in the console is printed by chrome itself. Repressing this type of message has been debated for years, but the consensus seems to be that this message is desirable – see this discussion. Just in case you’re interested: As per this comment, the reason we’re …

Read more

TypeError: Failed to execute ‘fetch’ on ‘Window’: Invalid value

Double-check the value in your Authorization header for invalid characters: This also happened to me when I tried to add an Authorization header to my fetch calls, due to an invalid character in the Authorization key. In my case it was caused by a newline (\n) character in the header string, i.e. Bearer:\nsomelong-token. Changing the …

Read more

Proper Way to Make API Fetch ‘POST’ with Async/Await

actually your code can be improved like this: to do a post just add the method on the settings of the fetch call. getDevices = async () => { const location = window.location.hostname; const settings = { method: ‘POST’, headers: { Accept: ‘application/json’, ‘Content-Type’: ‘application/json’, } }; try { const fetchResponse = await fetch(`http://${location}:9000/api/sensors/`, settings); …

Read more

Internal API fetch with getServerSideProps? (Next.js)

But then I read in the Next.js documentation that you should not use fetch() to all an API route in getServerSideProps(). You want to use the logic that’s in your API route directly in getServerSideProps, rather than calling your internal API. That’s because getServerSideProps runs on the server just like the API routes (making a …

Read more

What causes a Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode error?

I believe this is a Chromium bug that has been reported here. Hopefully it will be fixed soon or some more information about the issue will be published. Paul Irish implemented a temporary work around, which is as follows: if (e.request.cache === ‘only-if-cached’ && e.request.mode !== ‘same-origin’) { return; } I ran it inside the …

Read more

how to process fetch response from an ‘opaque’ type?

Essentially, you cannot access response body from an opaque request. Adding mode: ‘no-cors’ won’t magically make things work. Browsers by default block frontend code from accessing resources cross-origin. If a site sends Access-Control-Allow-Origin in its responses, then browsers will relax that blocking and allow your code to access the response. But if a site doesn’t …

Read more

Missing headers in Fetch response

The Headers class instance that fetch returns is an iterable, as opposed to a plain object like axios returns. Some iterable’s data, such as Headers or URLSearchParams, aren’t viewable from the console, you have to iterate it and console.log each element, like: fetch(‘http://localhost:9876/test/sample-download’, { method: ‘post’, headers: {}, body: {} }) .then(response => { // …

Read more